<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta property="qc:admins" content="465267610762567726375" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />  
	<title>AngularJS 教程 | 菜鸟教程</title>

  <link rel='dns-prefetch' href='//s.w.org'>
<link rel="canonical" href="http://www.runoob.com/angularjs/angularjs-tutorial.html" />
<meta name="keywords" content="AngularJS 教程,Angular,AngularJS">
<meta name="description" content="AngularJS 教程     AngularJS 通过新的属性和表达式扩展了 HTML。 	AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。 	AngularJS 学习起来非常简单。 	现在开始学习 AngularJS！    每个章节都有相应的实例 在每个章节中，您可以在线编辑实例，然后点击按钮查看结果。  AngularJS 实例  &amp;lt;!DOCTYPE..">
		
	<link rel="shortcut icon" href="http://www.runoob.com/favicon.ico" mce_href="http://www.runoob.com/favicon.ico" type="image/x-icon" >
	<link rel="stylesheet" href="http://www.runoob.com/wp-content/themes/runoob/style.css?v=1.02" type="text/css" media="all" />	
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/fontawesome/4.2.0/css/font-awesome.min.css" media="all" />	
  <script src="http://cdn.static.runoob.com/libs/jquery/1.8.1/jquery.min.js"></script>
  <!--[if lt IE 9]>
     <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
  <link rel="apple-touch-icon" href="http://static.runoob.com/images/icon/mobile-icon.png"/>
  <meta name="apple-mobile-web-app-title" content="菜鸟教程">
</head>
<body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link"> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-intro.html" rel="next"> AngularJS 简介</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">教程</span>
</h1>
<br>
<div class="tutintro">
<img src="/wp-content/uploads/2014/06/angular.jpg" alt="Angular" style="height:132px;width:132px">
<p>AngularJS 通过新的属性和表达式扩展了 HTML。</p>
	<p>AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。</p>
	<p>AngularJS 学习起来非常简单。</p>
	<p><strong><a href="/angularjs/angularjs-intro.html">现在开始学习 AngularJS！</a></strong></p>
</div>
<hr>

<h2>每个章节都有相应的实例</h2>
<p>在每个章节中，您可以在线编辑实例，然后点击按钮查看结果。</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
<span class="highLT">&lt;</span><span class="highELE">!DOCTYPE</span> <span class="highATT">html</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">html</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">head</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">meta</span> <span class="highATT">charset</span>=<span class="highVAL">"utf-8"</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/head</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">body</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">""</span><span class="highGT">&gt;</span><br>
&nbsp;	<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span>名字 : <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"name"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br>
&nbsp;	<span class="highLT">&lt;</span><span class="highELE">h1</span><span class="highGT">&gt;</span>Hello <span class="highATT">{{name}}</span><span class="highLT">&lt;</span><span class="highELE">/h1</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/html</span><span class="highGT">&gt;</span>
</div><br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_intro" target="_blank">尝试一下 »</a>
</div>
<br><hr>

<h2>阅读本教程前，您需要了解的知识：</h2>
<p>在开始学习 AngularJS 之前，您需要具备以下基础知识：</p>
<ul>
<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
</ul>
<hr>

<h2>AngularJS 历史</h2>
<p>AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的。</p>
<p>AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。</p>
<p>这是一个非常好的构想，该项目目前已由 Google 正式支持，有一个全职的开发团队继续开发和维护这个库。</p>
<hr>

<h2>AngularJS 实例</h2>
<p>本教程包含了大量的 AngularJS 实例！</p>
<p><a href="angularjs-examples.html">AngularJS 实例</a></p>
<hr>

<h2>AngularJS 参考手册</h2>
<p>参考手册包含了本教程中使用到的所有指令和过滤器。</p>
<p><a href="angularjs-reference.html">AngularJS 参考手册</a></p>
<br><br>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link"> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-intro.html" rel="next"> AngularJS 简介</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-tutorial.html" rel="prev"> AngularJS 教程</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-expressions.html" rel="next"> AngularJS 表达式</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">简介</span>
</h1>
<hr>
<p class="intro">AngularJS 是一个 <strong>JavaScript 框架</strong>。它可通过 &lt;script&gt; 标签添加到 HTML 页面。</p>
<p class="intro">AngularJS 通过 <strong><a href="/angularjs/angularjs-directives.html">指令</a></strong> 扩展了 HTML，且通过 <strong><a href="/angularjs/angularjs-expressions.html">表达式</a></strong> 绑定数据到 HTML。</p>
<hr>
<h2>AngularJS 是一个 JavaScript 框架</h2>
<p>AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。</p>
<p>AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：</p>
<div class="example">
<div class="example_code">
&lt;script
src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;</div>
</div>
<p>
</p>
<table class="lamp"><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>我们建议把脚本放在 &lt;body&gt; 元素的底部。<br>
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。</td>
</tr></table>
<p>各个 angular.js 版本下载： <a href="https://github.com/angular/angular.js/releases" target="_blank">https://github.com/angular/angular.js/releases</a></p>
<hr>

<h2>AngularJS 扩展了 HTML</h2>
<p>AngularJS 通过 <strong>ng-directives</strong> 扩展了 HTML。</p>
<p><strong>ng-app</strong> 指令定义一个 AngularJS 应用程序。</p>
<p><strong>ng-model</strong> 指令把元素值（比如输入域的值）绑定到应用程序。</p>
<p><strong>ng-bind</strong> 指令把应用程序数据绑定到 HTML 视图。</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
<span class="highLT">&lt;</span><span class="highELE">!DOCTYPE</span> <span class="highATT">html</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">html</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">head</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">meta</span> <span class="highATT">charset</span>=<span class="highVAL">"utf-8"</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/head</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">body</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">""</span><span class="highGT">&gt;</span><br>
&nbsp;	<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span>名字 : <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"name"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br>
&nbsp;	<span class="highLT">&lt;</span><span class="highELE">h1</span><span class="highGT">&gt;</span>Hello <span class="highATT">{{name}}</span><span class="highLT">&lt;</span><span class="highELE">/h1</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/html</span><span class="highGT">&gt;</span>
</div><br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_intro" target="_blank">尝试一下 »</a>
</div>
<p>实例讲解：</p>
<p>当网页加载完毕，AngularJS 自动开启。</p>
<p><strong>ng-app</strong> 指令告诉 AngularJS，&lt;div&gt; 元素是 AngularJS <strong>应用程序</strong> 的"所有者"。</p>
<p><strong>ng-model</strong> 指令把输入域的值绑定到应用程序变量 <strong>name</strong>。</p>
<p><strong>ng-bind</strong> 指令把应用程序变量 name 绑定到某个段落的 innerHTML。</p>
<p>
</p>
<table class="lamp"><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>如果您移除了 <strong>ng-app</strong> 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。</td>
</tr></table>

<hr>
<h2>什么是 AngularJS？</h2>

<p>AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
</p>
<ul>
<li>AngularJS 把应用程序数据绑定到 HTML 元素。</li>
	<li>AngularJS 可以克隆和重复 HTML 元素。</li>
	<li>AngularJS 可以隐藏和显示 HTML 元素。</li>
	<li>AngularJS 可以在 HTML 元素"背后"添加代码。</li>
	<li>AngularJS 支持输入验证。</li>
</ul>
<hr>

<h2>AngularJS 指令</h2>
<p>正如您所看到的，AngularJS 指令是以 <strong>ng</strong> 作为前缀的 HTML 属性。</p>
<p><strong>ng-init</strong> 指令初始化 AngularJS 应用程序变量。</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app="" ng-init="firstName='John'"&gt;<br><br>
&lt;p&gt;姓名为 &lt;span ng-bind="firstName"&gt;&lt;/span&gt;&lt;/p&gt;<br><br>
&lt;/div&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_intro_directives" target="_blank">尝试一下 »</a>
</div>
<p>
</p>
<table class="lamp"><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>HTML5 允许扩展的（自制的）属性，以 <strong>data-</strong> 开头。<br>
AngularJS 属性以 <strong>ng-</strong> 开头，但是您可以使用 <strong>data-ng-</strong> 来让网页对 HTML5 有效。</td>
</tr></table>
<p>带有有效的 HTML5：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div data-ng-app="" data-ng-init="firstName='John'"&gt;<br><br>
&lt;p&gt;姓名为 &lt;span data-ng-bind="firstName"&gt;&lt;/span&gt;&lt;/p&gt;<br><br>
&lt;/div&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_intro_directives_html" target="_blank">尝试一下 »</a>
</div>
<br><hr>

<h2>AngularJS 表达式</h2>
<p>AngularJS 表达式写在双大括号内：<strong>{{ expression }}</strong>。</p>
<p>AngularJS 表达式把数据绑定到 HTML，这与 <strong>ng-bind</strong> 指令有异曲同工之妙。</p>
<p>AngularJS 将在表达式书写的位置"输出"数据。</p>
<p><strong>AngularJS 表达式</strong> 很像 <strong>JavaScript 
表达式</strong>：它们可以包含文字、运算符和变量。</p>
<p>实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;meta charset="utf-8"&gt;<br>
&lt;script
src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;
<br>&lt;/head&gt;<br>
&lt;body&gt;<br><br>&lt;div ng-app=""&gt;<br>
 	&lt;p&gt;我的第一个表达式： {{ 5 + 5 }}&lt;/p&gt;<br>
&lt;/div&gt;<br><br>

&lt;/body&gt;<br>
&lt;/html&gt;<br>
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_intro_expression" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>AngularJS 应用</h2>
<p>AngularJS <strong>模块（Module）</strong> 定义了 AngularJS 应用。</p>
<p>AngularJS <strong>控制器（Controller）</strong> 用于控制 AngularJS 应用。 </p>
<p> <strong>ng-app</strong>指令定义了应用,  <strong>ng-controller</strong> 
定义了控制器。</p>
<div class="example">
  <h2 class="example">AngularJS 实例</h2>
<div class="example_code">
&lt;div ng-app=&quot;<strong>myApp</strong>&quot; ng-controller=&quot;<strong>myCtrl</strong>&quot;&gt;<br>
<br>名: &lt;input type=&quot;text&quot; ng-model=&quot;firstName&quot;&gt;&lt;br&gt;<br>
姓: &lt;input type=&quot;text&quot; ng-model=&quot;lastName&quot;&gt;&lt;br&gt;<br>&lt;br&gt;<br>
姓名: {{firstName + &quot; &quot; + lastName}}<br>
<br>&lt;/div&gt;<br><br>&lt;script&gt;<br>
 var app = angular.module('<strong>myApp</strong>', []);<br>app.controller('<strong>myCtrl</strong>', 
 function($scope) {<br>&nbsp;&nbsp;&nbsp; $scope.firstName= &quot;John&quot;;<br>&nbsp;&nbsp;&nbsp; 
 $scope.lastName= &quot;Doe&quot;;<br>});<br>&lt;/script&gt;
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_intro_controller" target="_blank">尝试一下 &raquo;</a>
</div>
<p>AngularJS 模块定义应用:</p>
<div class="example">
  <h2 class="example">AngularJS 模块</h2>
<div class="example_code">
 var app = angular.module('myApp', []);
</div>
</div>
<p>AngularJS 控制器控制应用:</p>
<div class="example">
  <h2 class="example">AngularJS 控制器</h2>
    <div class="example_code">
     app.controller('myCtrl', 
 function($scope) {<br>&nbsp;&nbsp;&nbsp; $scope.firstName= &quot;John&quot;;<br>&nbsp;&nbsp;&nbsp; 
 $scope.lastName= &quot;Doe&quot;;<br>});
</div>
</div>
<p>在接下来的教程中你将学习到更多的应用和模块的知识。</p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-tutorial.html" rel="prev"> AngularJS 教程</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-expressions.html" rel="next"> AngularJS 表达式</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-intro.html" rel="prev"> AngularJS 简介</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-directives.html" rel="next"> AngularJS 指令</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">表达式</span>
</h1>
<hr>
<p class="intro">AngularJS 使用 <strong>表达式</strong> 把数据绑定到 HTML。</p>
<hr>

<h2>AngularJS 表达式</h2>
<p>AngularJS 表达式写在双大括号内：<strong>{{ expression }}</strong>。</p>
<p>AngularJS 表达式把数据绑定到 HTML，这与 <strong>ng-bind</strong> 指令有异曲同工之妙。</p>
<p>AngularJS 将在表达式书写的位置"输出"数据。</p>
<p><strong>AngularJS 表达式</strong> 很像 <strong>JavaScript 
表达式</strong>：它们可以包含文字、运算符和变量。</p>
<p>实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
<span class="highLT">&lt;</span><span class="highELE">!DOCTYPE</span> <span class="highATT">html</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">html</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">head</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">meta</span> <span class="highATT">charset</span>=<span class="highVAL">"utf-8"</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/head</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">body</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">""</span><span class="highGT">&gt;</span><br>
&nbsp;	<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span>我的第一个表达式: <span class="highATT">{{ 5 + 5 }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/html</span><span class="highGT">&gt;</span><br>
</div><br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_expression" target="_blank">尝试一下 »</a>
</div>
<hr>

<h2>AngularJS 数字</h2>
<p>AngularJS 数字就像 JavaScript 数字：</p>
<div class="example">
	<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app="" ng-init="quantity=1;cost=5"&gt;<br><br>
&lt;p&gt;总价： {{ quantity * cost }}&lt;/p&gt;<br><br>
&lt;/div&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_expressions" target="_blank">尝试一下 »</a>
</div>
<p>使用 ng-bind 的相同实例：</p>
<div class="example">
	<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app="" ng-init="quantity=1;cost=5"&gt;<br><br>
&lt;p&gt;总价： &lt;span ng-bind="quantity * cost"&gt;&lt;/span&gt;&lt;/p&gt;<br><br>
&lt;/div&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_bind_numbers" target="_blank">尝试一下 »</a>
</div>
<p>
</p>
<table class="lamp"><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>
使用 <strong>ng-init</strong> 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。</td>
</tr></table>
<hr>

<h2>AngularJS 字符串</h2>
<p>AngularJS 字符串就像 JavaScript 字符串：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app="" ng-init="firstName='John';lastName='Doe'"&gt;<br><br>&lt;p&gt;姓名： {{ firstName + " " + lastName }}&lt;/p&gt;<br><br>&lt;/div&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_expressions_strings" target="_blank">尝试一下 »</a>
</div>
<p>使用 ng-bind 的相同实例：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app="" ng-init="firstName='John';lastName='Doe'"&gt;<br><br>
&lt;p&gt;姓名： &lt;span ng-bind="firstName + ' ' + lastName"&gt;&lt;/span&gt;&lt;/p&gt;<br><br>&lt;/div&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_bind_strings" target="_blank">尝试一下 »</a>
</div>
<br><hr>

<h2>AngularJS 对象</h2>
<p>AngularJS 对象就像 JavaScript 对象：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"&gt;<br><br>
&lt;p&gt;姓为 {{ person.lastName }}&lt;/p&gt;<br><br>
&lt;/div&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_expressions_objects" target="_blank">尝试一下 »</a>
</div>
<p>使用 ng-bind 的相同实例：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"&gt;<br><br>
&lt;p&gt;姓为 &lt;span ng-bind="person.lastName"&gt;&lt;/span&gt;&lt;/p&gt;<br><br>
&lt;/div&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_bind_objects" target="_blank">尝试一下 »</a>
</div>
<br><hr>

<h2>AngularJS 数组</h2>
<p>AngularJS 数组就像 JavaScript 数组：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app="" ng-init="points=[1,15,19,2,40]"&gt;<br><br>
&lt;p&gt;第三个值为 {{ points[2] }}&lt;/p&gt;<br><br>
&lt;/div&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_expressions_arrays" target="_blank">尝试一下 »</a>
</div>
<p>使用 ng-bind 的相同实例：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app="" ng-init="points=[1,15,19,2,40]"&gt;<br><br>
&lt;p&gt;第三个值为 &lt;span ng-bind="points[2]"&gt;&lt;/span&gt;&lt;/p&gt;<br><br>
&lt;/div&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_bind_arrays" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>AngularJS 表达式 与 JavaScript 表达式</h2>
<p>类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。 </p>
<p>与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。</p>
<p>与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。</p>
<p>与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。</p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-intro.html" rel="prev"> AngularJS 简介</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-directives.html" rel="next"> AngularJS 指令</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-expressions.html" rel="prev"> AngularJS 表达式</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-controllers.html" rel="next"> AngularJS 控制器</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">指令</span>
</h1>
<hr>
<p class="intro">AngularJS 通过被称为 <strong>指令</strong> 的新属性来扩展 HTML。</p>
<p  class="intro">
AngularJS 通过内置的指令来为应用添加功能。</p>
<p  class="intro">AngularJS 允许你自定义指令。</p>
<hr>

<h2>AngularJS 指令</h2>
<p>AngularJS 指令是扩展的 HTML 属性，带有前缀 <strong>ng-</strong>。</p>
<p><strong>ng-app</strong> 指令初始化一个 AngularJS 应用程序。</p>
<p><strong>ng-init</strong> 指令初始化应用程序数据。</p>
<p><strong>ng-model</strong> 指令把元素值（比如输入域的值）绑定到应用程序。</p>
<p>完整的指令内容可以参阅 <a href="angularjs-reference.html"> AngularJS 参考手册</a>。</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app="" ng-init="firstName='John'"&gt;<br><br>
 	&lt;p&gt;在输入框中尝试输入：&lt;/p&gt;<br>
 	&lt;p&gt;姓名：&lt;input type="text" ng-model="firstName"&gt;&lt;/p&gt;<br>
 	&lt;p&gt;你输入的为： {{ firstName }}&lt;/p&gt;<br><br>
&lt;/div&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_directives" target="_blank">尝试一下 »</a>
</div>
<p><strong>ng-app</strong> 指令告诉 AngularJS，&lt;div&gt; 元素是 AngularJS <strong>应用程序</strong> 的"所有者"。</p>
<p>
</p>
<table class="lamp"><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>
一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。<br>
</td>
</tr></table>
<hr>

<h2>数据绑定</h2>
<p>上面实例中的 <strong>{{ firstName }}</strong> 表达式是一个 AngularJS 数据绑定表达式。</p>
<p>AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。</p>
<p><strong>{{ firstName }}</strong> 是通过 <strong>ng-model="firstName"</strong> 进行同步。</p>
<p>在下一个实例中，两个文本域是通过两个 ng-model 指令同步的：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app="" ng-init="quantity=1;price=5"&gt;<br><br>
&lt;h2&gt;价格计算器&lt;/h2&gt;<br><br>
数量： &lt;input type="number"	ng-model="quantity"&gt;<br>
价格： &lt;input type="number" ng-model="price"&gt;<br><br>
&lt;p&gt;&lt;b&gt;总价：&lt;/b&gt; {{ quantity * price }}&lt;/p&gt;<br><br>&lt;/div&gt;</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_binding" target="_blank">尝试一下 »</a>
</div>
<p>
</p>
<table class="lamp"><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>
使用 <strong>ng-init</strong> 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。</td>
</tr></table>
<hr>

<h2>重复 HTML 元素</h2>
<p><strong>ng-repeat</strong> 指令会重复一个 HTML 元素：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
&lt;div ng-app="" ng-init="names=['Jani','Hege','Kai']"&gt;<br>
  &lt;p&gt;使用 ng-repeat 来循环数组&lt;/p&gt;<br>
  &lt;ul&gt;<br>
    &lt;li ng-repeat="x in names"&gt;<br>      {{ x }}<br>
    &lt;/li&gt;<br>
  &lt;/ul&gt;<br>
&lt;/div&gt;<br>
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_repeat_array" target="_blank">尝试一下 »</a>
</div>
<p><strong>ng-repeat</strong> 指令用在一个对象数组上：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app="" ng-init="names=[<br>
	{name:'Jani',country:'Norway'},<br>
	{name:'Hege',country:'Sweden'},<br>
	{name:'Kai',country:'Denmark'}]"&gt;<br><br>&lt;p&gt;循环对象：&lt;/p&gt;<br>&lt;ul&gt;<br>
	  &lt;li ng-repeat="x	in names"&gt;<br>
	    {{ x.name + ', ' + x.country }}<br>  &lt;/li&gt;<br>
	&lt;/ul&gt;<br><br>&lt;/div&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_repeat_object" target="_blank">尝试一下 »</a>
</div>
<p>
</p>
<table class="lamp"><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。<br>
把实例中的对象想象成数据库中的记录。</td>
</tr></table>
<hr>

<h2>ng-app 指令</h2>
<p><strong>ng-app</strong> 指令定义了 AngularJS 应用程序的 <strong>根元素</strong>。</p>
<p><strong>ng-app</strong> 指令在网页加载完毕时会<strong>自动引导</strong>（自动初始化）应用程序。 </p>
<p>稍后您将学习到 <strong>ng-app</strong> 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。</p>
<hr>

<h2>ng-init 指令</h2>
<p><strong>ng-init</strong> 指令为 AngularJS 应用程序定义了 <strong>初始值</strong>。</p>
<p>通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。</p>
<p>稍后您将学习更多有关控制器和模块的知识。</p>
<hr>

<h2>ng-model 指令</h2>
<p><strong>ng-model</strong> 指令 <strong>绑定 HTML 元素</strong> 到应用程序数据。</p>
<p><strong>ng-model</strong> 指令也可以：</p>
<ul>
<li>为应用程序数据提供类型验证（number、email、required）。</li>
	<li>为应用程序数据提供状态（invalid、dirty、touched、error）。</li>
	<li>为 HTML 元素提供 CSS 类。</li>
	<li>绑定 HTML 元素到 HTML 表单。</li>
</ul>
<hr>

<h2>ng-repeat 指令</h2>
<p><strong>ng-repeat</strong> 指令对于集合中（数组中）的每个项会 <strong>克隆一次 HTML 元素</strong>。</p>
<br><hr>
<h2>创建自定义的指令</h2>
<p>除了 AngularJS 内置的指令外，我们还可以创建自定义指令。</p>
<p>你可以使用 <b>.directive</b> 函数来添加自定义的指令。</p>
<p>要调用自定义指令，HTML 元素上需要添加自定义指令名。</p>
<p>使用驼峰法来命名一个指令， <b>
runoobDirective</b>, 但在使用它时需要以 <b>-</b> 分割, <b>runoob-directive</b>:</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">body</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">runoob-directive</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/runoob-directive</span><span class="highGT">&gt;</span><br><br>
	<span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>var app = angular.module("myApp", []);<br>app.directive("runoobDirective", 
	function() {<br>&nbsp;&nbsp;&nbsp; return {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	template : "&lt;h1&gt;自定义指令!&lt;/h1&gt;"<br>&nbsp;&nbsp;&nbsp; };<br>
	});<br><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br><br>
	<span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span></div>
	</div><br><a class="tryitbtn" href="/try/try.php?filename=try_ng_directive_tagname" target="_blank">尝试一下 »</a>

</div>
<p>你可以通过以下方式来调用指令：</p>
<ul>
	<li>元素名</li>
	<li>属性</li>
	<li>类名</li>
	<li>注释</li>
</ul>
<p>以下实例方式也能输出同样结果:</p>
<div class="example">
	<p>元素名</p>
<div class="example_code">
<div class="htmlHigh"><span class="highLT">&lt;</span><span class="highELE">runoob-directive</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/runoob-directive</span><span class="highGT">&gt;</span></div>
	</div><br><a class="tryitbtn" href="/try/try.php?filename=try_ng_directive_element" target="_blank">尝试一下 »</a>

</div>

<div class="example">
	<p>属性</p>
<div class="example_code">
<div class="htmlHigh"><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">runoob-directive</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span></div>
	</div><br><a class="tryitbtn" href="/try/try.php?filename=try_ng_directive_attribute" target="_blank">尝试一下 »</a>
</div>
<div class="example">
	<p>类名</p>
<div class="example_code">
<div class="htmlHigh"><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"runoob-directive"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span></div>
	</div>
	<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_directive_class" target="_blank">尝试一下 »</a>

</div>

<div class="example">
	<p>注释</p>
<div class="example_code">
<div class="htmlHigh"><span class="highCOM">&lt;!-- 指令: runoob-directive --&gt;</span></div>
	</div><br><a class="tryitbtn" href="/try/try.php?filename=try_ng_directive_comment" target="_blank">尝试一下 »</a>

</div>
<hr>
<h2>限制使用</h2>
<p>你可以限制你的指令只能通过特定的方式来调用。</p>
<div class="example">
	<h3>实例</h3>
	<p>通过添加 <b>restrict</b> 属性,并设置只值为 <code>"A"</code>, 
	来设置指令只能通过属性的方式来调用:</p>
<div class="example_code">
<div class="jsHigh">
	<span class="highELE">var</span> app = angular.module(<span class="highVAL">"myApp"</span>, []);<br>app.directive(<span class="highVAL">"runoobDirective"</span>, 
	<span class="highELE">function</span>() {<br>&nbsp;&nbsp;&nbsp; <span class="highELE">return</span> {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	restrict : <span class="highVAL">"A"</span>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	template : <span class="highVAL">"&lt;h1&gt;自定义指令!&lt;/h1&gt;"</span><br>&nbsp;&nbsp;&nbsp; };<br>
	});<br></div>
	</div><br><a class="tryitbtn" href="/try/try.php?filename=try_ng_directive_restrictions" target="_blank">尝试一下 »</a>
</div><p><b>restrict</b> 值可以是以下几种:</p>
<ul>
	<li><code>E</code> 作为元素名使用</li>
	<li><code>A</code> 作为属性使用</li>
	<li><code>C</code> 作为类名使用</li>
	<li><code>M</code> 作为注释使用</li>
</ul><p><b>restrict</b> 默认值为 <code>EA</code>, 即可以通过元素名和属性名来调用指令。</p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-expressions.html" rel="prev"> AngularJS 表达式</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-controllers.html" rel="next"> AngularJS 控制器</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-api.html" rel="prev"> AngularJS API</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-scopes.html" rel="next"> AngularJS Scope(作用域)</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">ng-model 指令</span>
</h1>
<hr>
<p class="intro">ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, 
select, textarea)的值。</p><hr><h2>ng-model 指令</h2>
<p><code>ng-model</code> 指令可以将输入域的值与 AngularJS 创建的变量绑定。</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 名字: 
	<span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">ng-model=</span><span class="highVAL">"name"</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>var app = angular.module('myApp', []);<br>
	app.controller('myCtrl', function($scope) {<br>&nbsp;&nbsp;&nbsp; $scope.name 
	= "John Doe";<br>});<br><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span></div>
	<br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_model" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>双向绑定</h2><p>双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 名字: 
	<span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">ng-model=</span><span class="highVAL">"name"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">h1</span><span class="highGT">&gt;</span>你输入了: <span class="highATT">{{name}}</span><span class="highLT">&lt;</span><span class="highELE">/h1</span><span class="highGT">&gt;</span><br>
	<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br></div>
<br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_model_two-way" target="_blank">尝试一下 »</a>

</div><hr><h2>验证用户输入</h2>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">form</span> <span class="highATT">ng-app=</span><span class="highVAL">""</span> <span class="highATT">name=</span><span class="highVAL">"myForm"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; Email:<br>&nbsp;&nbsp;&nbsp; 
	<span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"email"</span> <span class="highATT">name=</span><span class="highVAL">"myAddress"</span> <span class="highATT">ng-model=</span><span class="highVAL">"text"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">ng-show=</span><span class="highVAL">"myForm.myAddress.$error.email"</span><span class="highGT">&gt;</span>不是一个合法的邮箱地址<span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/form</span><span class="highGT">&gt;</span><br></div>
	<br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_model_validate" target="_blank">尝试一下 »</a>
</div>
<p>以上实例中，提示信息会在 <code>ng-show</code> 属性返回 <code>true</code> 的情况下显示。</p>
<hr>
<h2>应用状态</h2>
<p><code>ng-model</code> 指令可以为应用数据提供状态值(invalid, 
dirty, touched, error):</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">form</span> <span class="highATT">ng-app=</span><span class="highVAL">""</span> <span class="highATT">name=</span><span class="highVAL">"myForm"</span> <span class="highATT">ng-init=</span><span class="highVAL">"myText = 'test@runoob.com'"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
	Email:<br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"email"</span> <span class="highATT">name=</span><span class="highVAL">"myAddress"</span> <span class="highATT">ng-model=</span><span class="highVAL">"myText"</span> 
	<span class="highATT">required</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">h1</span><span class="highGT">&gt;</span>状态<span class="highLT">&lt;</span><span class="highELE">/h1</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">{{myForm.myAddress.$valid}}</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">{{myForm.myAddress.$dirty}}</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">{{myForm.myAddress.$touched}}</span><br><span class="highLT">&lt;</span><span class="highELE">/form</span><span class="highGT">&gt;</span><br></div>
	<br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_model_status" target="_blank">尝试一下 »</a>
</div><hr>
<h2>CSS 类</h2>
<p><code>ng-model</code> 指令基于它们的状态为 HTML 元素提供了 CSS 类：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">style</span><span class="highGT">&gt;</span><br></div><div class="cssHigh"><span class="highELE">input.ng-invalid </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">background-color:</span><span class="highVAL"> 
		lightblue;</span><br>
	}<br></div><div class="htmlHigh"><span class="highLT">&lt;</span><span class="highELE">/style</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">body</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">form</span> <span class="highATT">ng-app=</span><span class="highVAL">""</span> <span class="highATT">name=</span><span class="highVAL">"myForm"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
		输入你的名字:<br>&nbsp;&nbsp;&nbsp; 
	<span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">name=</span><span class="highVAL">"myAddress"</span> <span class="highATT">ng-model=</span><span class="highVAL">"text"</span> <span class="highATT">required</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/form</span><span class="highGT">&gt;</span><br></div>
	</div><br>
	<a class="tryitbtn" href="/try/try.php?filename=try_ng_model_css" target="_blank">尝试一下 »</a>
</div>
<p><code>ng-model</code> 指令根据表单域的状态添加/移除以下类：</p>
<ul>
	<li>ng-empty</li>
	<li>ng-not-empty</li>
	<li>ng-touched</li>
	<li>ng-untouched</li>
	<li>ng-valid</li>
	<li>ng-invalid</li>
	<li>ng-dirty</li>
	<li>ng-pending</li>
	<li>ng-pristine</li>
</ul>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-api.html" rel="prev"> AngularJS API</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-scopes.html" rel="next"> AngularJS Scope(作用域)</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-model.html" rel="prev"> AngularJS ng-model 指令</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/ng-ng-app.html" rel="next"> AngularJS ng-app 指令</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">Scope(作用域)</span>
</h1>
<hr>
<p class="intro">Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。</p>
<p class="intro">Scope 是一个对象，有可用的方法和属性。</p>
<p class="intro">Scope 可应用在视图和控制器上。</p>
<hr>
<h2>如何使用 Scope</h2>
<p>当你在 AngularJS 创建控制器时，你可以将 <b>$scope</b> 对象当作一个参数传递:</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<p>控制器中的属性对应了视图上的属性：</p>
<div class="example_code htmlHigh">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">h1</span><span class="highGT">&gt;</span><span class="highATT">{{carname}}</span><span class="highLT">&lt;</span><span class="highELE">/h1</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>
</div>
<div class="jsHigh">
	<span class="highELE">var</span> app = angular.module(<span class="highVAL">'myApp'</span>, 
	[]);<br><br>app.controller(<span class="highVAL">'myCtrl'</span>, <span class="highELE">function</span>($scope) {<br>&nbsp;&nbsp;&nbsp; $scope.carname 
	= <span class="highVAL">"Volvo"</span>;<br>});<br>
</div>
<div class="htmlHigh"><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span></div></div><br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_scope" target="_blank">尝试一下 »</a>
</div>
<p>当在控制器中添加 <b>$scope</b> 
对象时，视图 (HTML) 可以获取了这些属性。</p>
<p>视图中，你不需要添加 <b>$scope</b> 前缀, 只需要添加属性名即可，如： <b>{{carname}}</b>。</p>
<hr>
<h2>Scope 概述</h2>
<p>AngularJS 应用组成如下：</p>
<ul>
	<li>View(视图), 即 HTML。</li>
	<li>Model(模型), 当前视图中可用的数据。</li>
	<li>Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
	</li>
</ul>
<p>scope 是模型。</p>
<p>scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>	<p>如果你修改了视图，模型和控制器也会相应更新：</p>

<div class="example_code htmlHigh">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br>
	<br><span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">ng-model=</span><span class="highVAL">"name"</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">h1</span><span class="highGT">&gt;</span>我的名字是 <span class="highATT">{{name}}</span><span class="highLT">&lt;</span><span class="highELE">/h1</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>
</div>
<div class="jsHigh">
	<span class="highELE">var</span> app = angular.module(<span class="highVAL">'myApp'</span>, 
	[]);<br><br>app.controller(<span class="highVAL">'myCtrl'</span>, <span class="highELE">function</span>($scope) {<br>&nbsp;&nbsp;&nbsp; $scope.name 
	= <span class="highVAL">"John Dow"</span>;<br>});<br>
</div>
<div class="htmlHigh"><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span></div></div><br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_scope_sync" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>Scope 作用范围</h2>
<p>了解你当前使用的 scope 是非常重要的。</p>
<p>在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。</p>

<div class="example">
<h2 class="example">AngularJS 实例</h2>
<p>当我们使用 <b>ng-repeat</b> 指令时，每个重复项都访问了当前的重复对象:</p>
<div class="example_code htmlHigh">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br>
	<br><span class="highLT">&lt;</span><span class="highELE">ul</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">li</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in names"</span><span class="highGT">&gt;</span><span class="highATT">{{x}}</span><span class="highLT">&lt;</span><span class="highELE">/li</span><span class="highLT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/ul</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>
</div>
<div class="jsHigh">
	<span class="highELE">var</span> app = angular.module(<span class="highVAL">'myApp'</span>, 
	[]);<br><br>app.controller(<span class="highVAL">'myCtrl'</span>, <span class="highELE">function</span>($scope) {<br>&nbsp;&nbsp;&nbsp; $scope.names 
	= [<span class="highVAL">"Emil"</span>, <span class="highVAL">"Tobias"</span>, <span class="highVAL">"Linus"</span>];<br>});<br>
</div>
<div class="htmlHigh"><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span></div></div><br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_scope_repeat" target="_blank">尝试一下 »</a>
</div>

<p>每个 <b>&lt;li&gt;</b> 元素可以访问当前的重复对象，这里对应的是一个字符串， 并使用变量 <b>x</b> 表示。</p>
<hr>
<h2>根作用域</h2><p>所有的应用都有一个 <b>$rootScope</b>，它可以作用在 <b>ng-app</b> 指令包含的所有 HTML 元素中。</p>
<p><b>$rootScope</b> 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<p>创建控制器时，将 $rootScope 作为参数传递，可在应用中使用：</p>
<div class="example_code htmlHigh">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br>
	<br><span class="highLT">&lt;</span><span class="highELE">h1</span><span class="highGT">&gt;</span姓氏为 <span class="highATT">{{lastname}}</span> 家族成员:<span class="highLT">&lt;</span><span class="highELE">/h1</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">ul</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">li</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in names"</span><span class="highGT">&gt;</span><span class="highATT">{{x}}</span> 
	<span class="highATT">{{lastname}}</span><span class="highLT">&lt;</span><span class="highELE">/li</span><span class="highLT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/ul</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>
</div>
<div class="jsHigh">
	<span class="highELE">var</span> app = angular.module(<span class="highVAL">'myApp'</span>, 
	[]);<br><br>app.controller(<span class="highVAL">'myCtrl'</span>, <span class="highELE">function</span>($scope, $rootScope) {<br>&nbsp;&nbsp;&nbsp; $scope.names 
	= [<span class="highVAL">"Emil"</span>, <span class="highVAL">"Tobias"</span>, <span class="highVAL">"Linus"</span>];<br>&nbsp;&nbsp;&nbsp; 
	$rootScope.lastname = <span class="highVAL">"Refsnes"</span>;<br>});<br>
</div>
<div class="htmlHigh"><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span></div></div><br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_scope_rootscope" target="_blank">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-model.html" rel="prev"> AngularJS ng-model 指令</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/ng-ng-app.html" rel="next"> AngularJS ng-app 指令</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-directives.html" rel="prev"> AngularJS 指令</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-filters.html" rel="next"> AngularJS 过滤器</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">控制器</span>
</h1>
<hr>
<p class="intro"> AngularJS 控制器 <strong>控制</strong> AngularJS 应用程序的数据。</p>
<p class="intro"> AngularJS 控制器是常规的 <strong>JavaScript 对象</strong>。</p>
<hr>

<h2>AngularJS 控制器</h2>
<p>AngularJS 应用程序被控制器控制。</p>
<p><strong>ng-controller</strong> 指令定义了应用程序控制器。</p>
<p>控制器是 <strong>JavaScript 对象</strong>，由标准的 JavaScript <strong>对象的构造函数</strong> 创建。</p>

<div class="example">
 <h2 class="example">AngularJS 实例</h2>
<div class="example_code">
	<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br>
	<br>名: <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"firstName"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>
	姓: <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"lastName"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>
	姓名: <span class="highATT">{{firstName + " " + lastName}}</span><br>
	<br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>var app = angular.module('myApp', 
    []);<br>app.controller('myCtrl', function($scope) {<br>&nbsp;&nbsp;&nbsp; $scope.firstName 
    = "John";<br>&nbsp;&nbsp;&nbsp; $scope.lastName = "Doe";<br>});<br><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_controller" target="_blank">尝试一下 »</a>
</div>

<p>应用解析：</p><p>AngularJS 应用程序由 <strong>ng-app</strong> 定义。应用程序在 &lt;div&gt; 内运行。</p>
<p><strong>ng-controller="myCtrl"</strong> 属性是一个 AngularJS 指令。用于定义一个控制器。</p>
<p><strong>myCtrl</strong> 函数是一个 JavaScript 函数。</p>
<p>AngularJS 使用<strong>$scope</strong> 对象来调用控制器。</p>
<p>在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。</p>
<p>控制器的 <strong>$scope</strong> （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。</p>
<p>控制器在作用域中创建了两个属性
(<strong>firstName</strong> 和
<strong>lastName</strong>)。</p>
<p><strong>ng-model</strong> 指令绑定输入域到控制器的属性（firstName 和 lastName）。</p>
<hr>
<h2>控制器方法</h2>
<p>上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。</p>
<p>控制器也可以有方法（变量和函数）：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"personCtrl"</span><span class="highGT">&gt;</span><br><br>
名: <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"firstName"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>
姓: <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"lastName"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>
姓名: <span class="highATT">{{fullName()}}</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>var app = angular.module('myApp', []);<br>app.controller('personCtrl', 
 function($scope) {<br>
&nbsp;&nbsp;&nbsp; $scope.firstName = "John";<br>&nbsp;&nbsp;&nbsp; $scope.lastName 
 = "Doe";<br>&nbsp;&nbsp;&nbsp; $scope.fullName = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 return $scope.firstName + " " + $scope.lastName;<br>&nbsp;&nbsp;&nbsp; }<br>});<br>
<span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
<br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_controller_property" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>外部文件中的控制器</h2>
<p>在大型的应用程序中，通常是把控制器存储在外部文件中。</p>
<p>只需要把 &lt;script&gt; 标签中的代码复制到名为 <a href="/try/demo_source/personController.js" target="_blank">personController.js</a> 的外部文件中即可：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
	<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"personCtrl"</span><span class="highGT">&gt;</span><br>
	<br>First Name: <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"firstName"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>
	Last Name: <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"lastName"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>
	Full Name: <span class="highATT">{{firstName + " " + lastName}}</span><br>
	<br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"personController.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_controller_js" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>其他实例</h2>
<p>以下实例创建一个新的控制器文件:</p>
<div class="example">
<div class="example_code">
 angular.module('myApp', []).controller('namesCtrl',  
 function($scope) {<br>
&nbsp;&nbsp;&nbsp; $scope.names = [<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {name:'Jani',country:'Norway'},<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {name:'Hege',country:'Sweden'},<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {name:'Kai',country:'Denmark'}<br>
&nbsp;&nbsp;&nbsp; ];<br>
});
</div>
</div>


<p>保存文件为&nbsp; <a href="/try/demo_source/namesController.js" target="_blank">namesController.js</a>:</p>


<p>然后，在应用中使用控制器文件:</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"namesCtrl"</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">ul</span><span class="highGT">&gt;</span><br>
&nbsp;
<span class="highLT">&lt;</span><span class="highELE">li</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in names"</span><span class="highGT">&gt;</span><br>
	&nbsp;&nbsp;&nbsp; <span class="highATT">{{ x.name + ', ' + x.country }}</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/li</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/ul</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"namesController.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_controller_names" target="_blank">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-directives.html" rel="prev"> AngularJS 指令</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-filters.html" rel="next"> AngularJS 过滤器</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-controllers.html" rel="prev"> AngularJS 控制器</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-html-dom.html" rel="next"> AngularJS HTML DOM</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">过滤器</span></h1>

<hr>
<p class="intro">过滤器可以使用一个管道字符（|）添加到表达式和指令中。</p>

<hr>
<h2>AngularJS 过滤器
</h2>
<p>AngularJS 过滤器可用于转换数据：</p>

<table class="reference"> <tbody><tr> <th style="width:20%">过滤器</th> <th>描述</th> </tr> <tr> <td>currency</td> <td>格式化数字为货币格式。</td> </tr> <tr> <td>filter</td> <td>从数组项中选择一个子集。</td> </tr> <tr> <td>lowercase</td> <td>格式化字符串为小写。</td> </tr> <tr> <td>orderBy</td> <td>根据某个表达式排列数组。</td> </tr> <tr> <td>uppercase</td> <td>格式化字符串为大写。</td> </tr> </tbody></table>

<hr>
<h2>表达式中添加过滤器</h2>
<p>过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.</p>
<p>(（下面的两个实例，我们将使用前面章节中提到的 person 控制器）)</p>

<p> <strong>uppercase</strong> 过滤器将字符串格式化为大写：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"personCtrl"</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span>姓名为 <span class="highATT">{{ lastName | uppercase }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span>
</div>
<br>
	<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_filters_uppercase" target="_blank">尝试一下 »</a>
</div>

<p><strong>lowercase</strong> 过滤器将字符串格式化为小写：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"personCtrl"</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span>姓名为 <span class="highATT">{{ lastName | lowercase }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span>
</div>
<br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_filters_lowercase" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>currency 过滤器</h2>
<p><strong>currency</strong> 过滤器将数字格式化为货币格式：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"costCtrl"</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"number"</span> <span class="highATT">ng-model=</span><span class="highVAL">"quantity"</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"number"</span> <span class="highATT">ng-model=</span><span class="highVAL">"price"</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span>总价 = <span class="highATT">{{ (quantity * price) | currency }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_filters_currency" target="_blank">尝试一下 »</a>
</div>

<hr>
<h2>向指令添加过滤器</h2>
<p>过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。</p>
<p><strong>orderBy</strong> 过滤器根据表达式排列数组：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"namesCtrl"</span><span class="highGT">&gt;</span><br><br>
	<span class="highLT">&lt;</span><span class="highELE">ul</span><span class="highGT">&gt;</span><br>
	&nbsp; <span class="highLT">&lt;</span><span class="highELE">li</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in names | orderBy:'country'"</span><span class="highGT">&gt;</span><br>
	&nbsp;&nbsp;&nbsp; <span class="highATT">{{ x.name + ', ' + x.country }}</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/li</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/ul</span><span class="highGT">&gt;</span><br>
	<br><span class="highLT">&lt;</span><span class="highELE">div</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_filters_orderby" target="_blank">尝试一下 »</a>
</div>

<hr>
<h2>过滤输入</h2>
<p>输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。</p>
<p><strong>filter</strong> 过滤器从数组中选择一个子集：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"namesCtrl"</span><span class="highGT">&gt;</span><br><br>
	<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"test"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br>
	<span class="highLT">&lt;</span><span class="highELE">ul</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">li</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in names | 
<span class="</span><span class='highATT'>marked">filter:test</span> | orderBy:'country'"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">{{ (x.name | uppercase) + ', ' + x.country }}</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/li</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/ul</span><span class="highGT">&gt;</span><br>
	<br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span>
</div>
<br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_filters_input" target="_blank">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-controllers.html" rel="prev"> AngularJS 控制器</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-html-dom.html" rel="next"> AngularJS HTML DOM</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-select.html" rel="prev"> AngularJS Select(选择框)</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-animations.html" rel="next"> AngularJS 动画</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS 服务(Service)
</h1>
<p class="intro">
AngularJS 中你可以创建自己的服务，或使用内建服务。</p>
<hr>
<h2>什么是服务？</h2>

<p>在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。</p>
<p>AngularJS 内建了30 多个服务。</p>
<p>有个 <b>$location</b> 服务，它可以返回当前页面的 URL 地址。</p>

<div class="example">
<h3>实例</h3>
<div class="example_code">

	<span class="highELE">var</span> app = angular.module(<span class="highVAL">'myApp'</span>, []);<br>app.controller(<span class="highVAL">'customersCtrl'</span>, 
	<span class="highELE">function</span>($scope, $location) {<br>&nbsp;&nbsp;&nbsp; $scope.myUrl = $location.absUrl();<br>
	});
</div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_services" target="_blank">尝试一下 »</a>
</div>
<p>注意 <b>$location</b> 服务是作为一个参数传递到 controller 
中。如果要使用它，需要在 controller 中定义。</p>
<hr>
<h2>为什么使用服务?</h2>
<p><b>$http</b> 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。</p>
<p>AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 <b>$location</b> 
服务比使用 <b>window.location</b> 对象更好。</p>
<hr>
<h2>$http 服务</h2>
<p><b>$http</b> 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。</p>
<div class="example">
<h3>实例</h3>

<p>使用 <b>$http</b> 服务向服务器请求数据:</p>
<div class="example_code">
	<span class="highELE">var</span> app = angular.module(<span class="highVAL">'myApp'</span>, []);<br>app.controller(<span class="highVAL">'myCtrl'</span>, 
	<span class="highELE">function</span>($scope, $http) {<br>&nbsp;&nbsp;&nbsp; $http.get(<span class="highVAL">"welcome.htm"</span>).then(<span class="highELE">function</span> 
	(response) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $scope.myWelcome 
	= response.data;<br>&nbsp;&nbsp;&nbsp; });<br>});</div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_services_http" target="_blank">尝试一下 »</a>

</div>
<p>以上是一个非常简单的 <b>$http</b> 服务实例，更多 <b>$http</b> 服务应用请查看 <a href="angularjs-http.html">AngularJS Http 
教程</a>。</p>
<hr>
<h2>$timeout 服务</h2>
<p>AngularJS <b>$timeout</b> 服务对应了 JS <b>
window.setTimeout</b> 函数。</p>
<div class="example">
<h3>实例</h3>
<p>两秒后显示信息:</p>
<div class="example_code">
	<span class="highELE">var</span> app = angular.module(<span class="highVAL">'myApp'</span>, []);<br>app.controller(<span class="highVAL">'myCtrl'</span>, 
	<span class="highELE">function</span>($scope, $timeout) {<br>&nbsp;&nbsp;&nbsp; $scope.myHeader = <span class="highVAL">"Hello 
	World!"</span>;<br>&nbsp;&nbsp;&nbsp; $timeout(<span class="highELE">function</span> () {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	$scope.myHeader = <span class="highVAL">"How are you today?"</span>;<br>&nbsp;&nbsp;&nbsp; }, <span class="highVAL">2000</span>);<br>
	});<br></div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_services_timeout" target="_blank">尝试一下 »</a>

</div>
<hr>
<h2>$interval 服务</h2>
<p>AngularJS <b>$interval</b> 服务对应了 JS <b>window.setInterval</b> 函数。</p>
<div class="example">
<h3>实例</h3>
<p>每两秒显示信息:</p>
<div class="example_code">
	<span class="highELE">var</span> app = angular.module(<span class="highVAL">'myApp'</span>, []);<br>app.controller(<span class="highVAL">'myCtrl'</span>, 
	<span class="highELE">function</span>($scope, $interval) {<br>&nbsp;&nbsp;&nbsp; $scope.theTime = <span class="highELE">new</span> 
	Date().toLocaleTimeString();<br>&nbsp;&nbsp;&nbsp; $interval(<span class="highELE">function</span> () {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	$scope.theTime = <span class="highELE">new</span> Date().toLocaleTimeString();<br>&nbsp;&nbsp;&nbsp; }, 
	<span class="highVAL">1000</span>);<br>});<br></div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_services_interval" target="_blank">尝试一下 »</a>


</div>
<hr>
<h2>创建自定义服务</h2>
<p>
你可以创建访问自定义服务，链接到你的模块中：</p>
<div class="example">

<p>创建名为<b>hexafy</b> 的访问:</p>
<div class="example_code">
	app.service(<span class="highVAL">'hexafy'</span>, <span class="highELE">function</span>() {<br>&nbsp;&nbsp;&nbsp; this.myFunc = <span class="highELE">function</span> (x) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	<span class="highELE">return</span> x.toString(<span class="highVAL">16</span>);<br>&nbsp;&nbsp;&nbsp; }<br>});<br></div>
</div><p>要使用访问自定义服务，需要在定义过滤器的时候独立添加:
</p>
<div class="example">
<h3>实例</h3>
	<p>使用自定义的的服务 <b>hexafy</b> 将一个数字转换为16进制数:</p>
<div class="example_code">
<div class="jsHigh">
	app.controller(<span class="highVAL">'myCtrl'</span>, <span class="highELE">function</span>($scope, <strong>hexafy</strong>) {<br>&nbsp;&nbsp;&nbsp; $scope.hex 
	= <strong>hexafy</strong>.myFunc(<span class="highVAL">255</span>);<br>});</div>
</div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_services_custom" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>过滤器中，使用自定义服务</h2>
<p>当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。</p>
<div class="example">
<p>在过滤器 <b>myFormat</b> 中使用服务 <b>hexafy</b>:</p>
<div class="example_code">
	app.filter(<span class="highVAL">'myFormat'</span>,[<strong>'hexafy'</strong>, <span class="highELE">function</span>(<strong>hexafy</strong>) {<br>&nbsp;&nbsp;&nbsp; 
	<span class="highELE">return</span> <span class="highELE">function</span>(x) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="highELE">return</span> 
	<strong>hexafy</strong>.myFunc(x);<br>&nbsp;&nbsp;&nbsp; };<br>}]);<br></div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_services_filter" target="_blank">尝试一下 »</a>
</div>
<p>在对象数组中获取值时你可以使用过滤器：</p>
<div class="example">

<p>创建服务 <b>hexafy</b>:</p>
<div class="example_code">
	<span class="highLT">&lt;</span><span class="highELE">ul</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">li</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in counts"</span><span class="highGT">&gt;</span><span class="highATT">{{x | myFormat}}</span><span class="highLT">&lt;</span><span class="highELE">/li</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/ul</span><span class="highGT">&gt;</span><br></div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_services_filter2" target="_blank">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-select.html" rel="prev"> AngularJS Select(选择框)</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-animations.html" rel="next"> AngularJS 动画</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-reference.html" rel="prev"> AngularJS 参考手册</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-tables.html" rel="next"> AngularJS 表格</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">XMLHttpRequest</span>
</h1>
<hr>
<p class="intro"><strong>$http</strong> 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。</p>
<hr>
<h2>读取 JSON 文件 </h2>
<p>以下是存储在web服务器上的 JSON 文件：</p>

<div class="example">
<h2 class="example">http://www.runoob.com/try/angularjs/data/Customers_JSON.php</h2>
<div class="example_code">
{<br>
    "records":<br>
[<br>{<br>"Name" : "Alfreds Futterkiste",<br>"City" : "Berlin",<br>
"Country" : "Germany"<br>},<br>{<br>"Name" : "Berglunds snabbköp",<br>"City" 
: "Luleå",<br>"Country" : "Sweden"<br>},<br>{<br>"Name" : "Centro comercial 
Moctezuma",<br>"City" : "México D.F.",<br>"Country" : "Mexico"<br>},<br>{<br>
"Name" : "Ernst Handel",<br>"City" : "Graz",<br>"Country" : "Austria"<br>},<br>
{<br>"Name" : "FISSA Fabrica Inter. Salchichas S.A.",<br>"City" : "Madrid",<br>
"Country" : "Spain"<br>},<br>{<br>"Name" : "Galería del gastrónomo",<br>
"City" : "Barcelona",<br>"Country" : "Spain"<br>},<br>{<br>"Name" : "Island 
Trading",<br>"City" : "Cowes",<br>"Country" : "UK"<br>},<br>{<br>"Name" : "Königlich 
Essen",<br>"City" : "Brandenburg",<br>"Country" : "Germany"<br>},<br>{<br>
"Name" : "Laughing Bacchus Wine Cellars",<br>"City" : "Vancouver",<br>
"Country" : "Canada"<br>},<br>{<br>"Name" : "Magazzini Alimentari Riuniti",<br>
"City" : "Bergamo",<br>"Country" : "Italy"<br>},<br>{<br>"Name" : 
"North/South",<br>"City" : "London",<br>"Country" : "UK"<br>},<br>{<br>
"Name" : "Paris spécialités",<br>"City" : "Paris",<br>"Country" : "France"<br>
},<br>{<br>"Name" : "Rattlesnake Canyon Grocery",<br>"City" : "Albuquerque",<br>
"Country" : "USA"<br>},<br>{<br>"Name" : "Simons bistro",<br>"City" : "København",<br>
"Country" : "Denmark"<br>},<br>{<br>"Name" : "The Big Cheese",<br>"City" : 
"Portland",<br>"Country" : "USA"<br>},<br>{<br>"Name" : "Vaffeljernet",<br>
"City" : "Århus",<br>"Country" : "Denmark"<br>},<br>{<br>"Name" : "Wolski 
Zajazd",<br>"City" : "Warszawa",<br>"Country" : "Poland"<br>}<br>]<br>}
</div>
</div>
<br><hr>
<h2>AngularJS $http</h2>
<p>AngularJS $http 是一个用于读取web服务器上数据的服务。 </p>
<p>$http.get(url) 是用于读取服务器数据的函数。 </p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"customersCtrl"</span><span class="highGT">&gt;</span> <br><br><span class="highLT">&lt;</span><span class="highELE">ul</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">li</span> 
<span class="highATT">ng-repeat=</span><span class="highVAL">"x in names"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">{{ x.Name + ', ' + x.Country }}</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/li</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/ul</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>var app = angular.module('myApp', 
 []);<br>app.controller('customersCtrl', 
 function($scope, $http) {<br>&nbsp;&nbsp;&nbsp; $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")<br>&nbsp;&nbsp;&nbsp; .success(function(response) {$scope.names 
= response.records;});<br>});<br><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_customers_json" target="_blank">
	尝试一下 »</a>
</div>

<p><strong>应用解析:</strong></p>
<p>注意：以上代码的 get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上，附：<a href="http://www.runoob.com/w3cnote/php-ajax-cross-border.html" target="_blank">PHP Ajax 跨域问题最佳解决方案</a>。</p>
<p> AngularJS 应用通过 <strong>ng-app</strong> 定义。应用在 &lt;div&gt; 中执行。</p>
<p> <strong>ng-controller</strong> 指令设置了 <strong>controller 
对象</strong> 名。</p>
<p>函数 <strong>customersController</strong> 是一个标准的 JavaScript <strong>
对象构造器</strong>。</p>
<p>控制器对象有一个属性: <strong>$scope.names</strong>。</p>
<p><strong>$http.get()</strong> 从web服务器上读取静态  <strong>JSON 数据</strong>。 </p>
<p>服务器数据文件为： 
<a href="http://www.runoob.com/try/angularjs/data/Customers_JSON.php" target="_blank"><strong>
http://www.runoob.com/try/angularjs/data/Customers_JSON.php</strong></a>。</p>
<p>当从服务端载入 JSON 数据时，<strong>$scope.names</strong> 变为一个数组。</p>
<p>
</p>
<table class="lamp"><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>以上代码也可以用于读取数据库数据。</td>
</tr></table>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-reference.html" rel="prev"> AngularJS 参考手册</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-tables.html" rel="next"> AngularJS 表格</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/ng-ng-value.html" rel="prev"> AngularJS ng-value 指令</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-services.html" rel="next"> AngularJS 服务(Service)</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS Select(选择框)</h1>

<p class="intro">
AngularJS 可以使用数组或对象创建一个下拉列表选项。</p>
<hr>
<h2>使用 ng-options 创建选择框</h2>

<p>在 AngularJS 中我们可以使用 <b>ng-option</b> 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:</p>

<div class="example">
<h3>实例</h3>
<div class="example_code">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">select</span> <span class="highATT">ng-model=</span><span class="highVAL">"selectedName"</span> 
	<span class="highATT">ng-options=</span><span class="highVAL">"x for x in names"</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/select</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
	<span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>
</div>
<div class="jsHigh">
    <span class="highELE">var</span> app = angular.module(<span class="highVAL">'myApp'</span>, []);<br>app.controller(<span class="highVAL">'myCtrl'</span>, 
	<span class="highELE">function</span>($scope) {<br>&nbsp;&nbsp;&nbsp; $scope.names = [<span class="highVAL">"Google"</span>, <span class="highVAL">"Runoob"</span>, 
	<span class="highVAL">"Taobao"</span>];<br>});<br>
</div>
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
</div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_select" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>ng-options 与 ng-repeat</h2>
<p>我们也可以使用<b>ng-repeat</b> 指令来创建下拉列表：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">select</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">option</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in names"</span><span class="highGT">&gt;</span><span class="highATT">{{x}}</span><span class="highLT">&lt;</span><span class="highELE">/option</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/select</span><span class="highGT">&gt;</span></div>
</div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_select_repeat" target="_blank">尝试一下 »</a>
</div>


<p><b>ng-repeat</b> 指令是通过数组来循环 HTML 代码来创建下拉列表，但 <b>ng-options</b> 指令更适合创建下拉列表，它有以下优势：</p>


<p>使用 <b>ng-options</b> 的选项的一个对象， <b>ng-repeat</b> 是一个字符串。</p>
<hr>
<h2>应该用哪个更好?</h2>
<p>假设我们使用以下对象:</p>
<pre>
$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "Runoob", url : "http://www.runoob.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];
</pre>
<p><b>ng-repeat</b> 有局限性，选择的值是一个字符串:</p>
<div class="example">
<h3>实例</h3>

<p>使用 <b>ng-repeat</b>:</p>
<div class="example_code">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">select</span> <span class="highATT">ng-model=</span><span class="highVAL">"selectedSite"</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">option</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in sites"</span> <span class="highATT">value=</span><span class="highVAL">"{{x.url}}"</span><span class="highGT">&gt;</span><span class="highATT">{{x.site}}</span><span class="highLT">&lt;</span><span class="highELE">/option</span><span class="highGT">&gt;</span><br>
	<span class="highLT">&lt;</span><span class="highELE">/select</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">h1</span><span class="highGT">&gt;</span>你选择的是: <span class="highATT">{{selectedSite}}</span><span class="highLT">&lt;</span><span class="highELE">/h1</span><span class="highGT">&gt;</span></div>
</div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_select_repeat_selected" target="_blank">尝试一下 »</a>

</div>


<p>使用 <b>ng-options</b> 指令，选择的值是一个对象：</p>
<div class="example">
<h3>实例</h3>

<p>使用 <b>ng-options</b>:</p>
<div class="example_code">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">select</span> <span class="highATT">ng-model=</span><span class="highVAL">"selectedSite"</span> <span class="highATT">ng-options=</span><span class="highVAL">"x.site for x in sites"</span><span class="highGT">&gt;</span><br>
	<span class="highLT">&lt;</span><span class="highELE">/select</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">h1</span><span class="highGT">&gt;</span>你选择的是: <span class="highATT">{{selectedSite.site}}</span><span class="highLT">&lt;</span><span class="highELE">/h1</span><span class="highGT">&gt;</span><br>
	<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span>网址为: <span class="highATT">{{selectedSite.url}}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span></div>
</div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_select_selected" target="_blank">尝试一下 »</a>

</div>
<p>当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。</p>
<hr>
<h2>数据源为对象</h2>
<p>前面实例我们使用了数组作为数据源，以下我们将数据对象作为数据源。</p>

<pre>
$scope.sites = {
    site01 : "Google",
    site02 : "Runoob",
    site03 : "Taobao"
};
</pre>
<p><b>ng-options</b> 使用对象有很大的不同，如下所示：</p>
<div class="example">
<h3>实例</h3>
	<p>使用对象作为数据源, <b>x</b> 为键(key),
	<b>y</b> 
	为值(value):</p>
<div class="example_code">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">select</span> <span class="highATT">ng-model=</span><span class="highVAL">"selectedSite"</span> <span class="highATT">ng-options=</span><span class="highVAL">"<strong>x for (x, y) in sites</strong>"</span><span class="highGT">&gt;</span><br>
	<span class="highLT">&lt;</span><span class="highELE">/select</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">h1</span><span class="highGT">&gt;</span>你选择的值是: <span class="highATT">{{selectedSite}}</span><span class="highLT">&lt;</span><span class="highELE">/h1</span><span class="highGT">&gt;</span><br>
	</div>
</div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_select_object" target="_blank">尝试一下 »</a>
</div>

<p>你选择的值为在 key-<strong>value</strong> 
对中的 <strong>value</strong>。</p>

<p><strong>value</strong> 在 key-<strong>value</strong> 对中也可以是个对象：</p>


<div class="example">
<h3>实例</h3>
<p>选择的值在 key-<strong>value</strong> 
对的 <strong>value</strong> 中, 这是它是一个对象:</p>
<div class="example_code">
<div class="jsHigh">
	$scope.cars = {<br>car01 : {brand : <span class="highVAL">"Ford"</span>, model : <span class="highVAL">"Mustang"</span>, color : 
	<span class="highVAL">"red"</span>},<br>car02 : {brand : <span class="highVAL">"Fiat"</span>, model : <span class="highVAL">"500"</span>, color : <span class="highVAL">"white"</span>},<br>
	car03 : {brand : <span class="highVAL">"Volvo"</span>, model : <span class="highVAL">"XC90"</span>, color : <span class="highVAL">"black"</span>}<br>};<br>
	</div>
</div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_select_object_object" target="_blank">尝试一下 »</a>
</div>


<p>在下拉菜单也可以不使用
<strong>key</strong>-value 对中的  <strong>key</strong> , 直接使用对象的属性：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">select</span> <span class="highATT">ng-model=</span><span class="highVAL">"selectedCar"</span> <span class="highATT">ng-options=</span><span class="highVAL">"<strong>y.brand</strong> for (x, y) in cars"</span><span class="highGT">&gt;</span><br>
	<span class="highLT">&lt;</span><span class="highELE">/select</span><span class="highGT">&gt;</span><br>
	</div>
</div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_select_object_y" target="_blank">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/ng-ng-value.html" rel="prev"> AngularJS ng-value 指令</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-services.html" rel="next"> AngularJS 服务(Service)</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-http.html" rel="prev"> AngularJS Http</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-sql.html" rel="next"> AngularJS SQL</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			
<h1>AngularJS <span class="color_h1">表格</span></h1>

<hr>
<p class="intro">
ng-repeat 指令可以完美的显示表格。
</p>

<hr>
<h2>在表格中显示数据</h2>
<p>使用 angular 显示表格是非常简单的：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"customersCtrl"</span><span class="highGT">&gt;</span> <br><br><span class="highLT">&lt;</span><span class="highELE">table</span><span class="highGT">&gt;</span><br>
&nbsp; <span class="highLT">&lt;</span><span class="highELE">tr</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in names"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Name }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Country }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/tr</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/table</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
 <span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>var app = angular.module('myApp', []);<br>app.controller('customersCtrl', 
 function($scope, $http) {<br>&nbsp;&nbsp;&nbsp; $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")<br>
 &nbsp;&nbsp;&nbsp;
 .success(function (response) {$scope.names = response.records;});<br>});<br><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span></div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_tables_simple" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>使用 CSS 样式</h2>
<p>为了让页面更加美观，我们可以在页面中使用CSS：</p>
<div class="example">
<h2 class="example">CSS 样式</h2>
<div class="example_code">
<span class="highELE">&lt;style&gt;<br>table, th , td </span>{<br>&nbsp; <span class="highATT">border:</span><span class="highVAL"> 1px solid grey;</span><br>&nbsp; 
<span class="highATT">border-collapse:</span><span class="highVAL"> collapse;</span><br>&nbsp; <span class="highATT">padding:</span><span class="highVAL"> 5px;</span><br>}<br><span class="highELE">table tr:nth-child(odd) </span>{<br>&nbsp; 
<span class="highATT">background-color:</span><span class="highVAL"> #f1f1f1;</span><br>}<br><span class="highELE">table tr:nth-child(even) </span>{<br>&nbsp; 
<span class="highATT">background-color:</span><span class="highVAL"> #ffffff;</span><br>}<br><span class="highELE">&lt;/style&gt;
</span></div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_tables_css" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>使用 orderBy 过滤器</h2>
<p>排序显示，可以使用 <strong>orderBy</strong> 过滤器:&nbsp; </p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">table</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">tr</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in names | orderBy : 'Country'"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Name }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Country }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">/tr</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/table</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_tables_orderby" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>使用 uppercase 过滤器</h2>
<p>使用 <strong>uppercase</strong> 过滤器转换为大写:&nbsp; </p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">table</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">tr</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in names"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Name }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Country 
| uppercase }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">/tr</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/table</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_tables_ucase" target="_blank">尝试一下 »</a>
</div>

<hr>
<h2>显示序号 ($index)</h2>
<p>表格显示序号可以在 &lt;td&gt; 中添加 <strong>$index</strong>:&nbsp; </p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">table</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">tr</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in names"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
 <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ $index + 1 }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Name }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Country }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">/tr</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/table</span><span class="highGT">&gt;</span>
</div>
<br>
 <a class="tryitbtn" href="/try/tryit.php?filename=try_ng_tables_index" target="_blank">尝试一下 »</a>
</div>

<hr>
<h2>使用 $even 和 $odd</h2>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
 <span class="highLT">&lt;</span><span class="highELE">table</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">tr</span> <span class="highATT">ng-repeat=</span><span class="highVAL">"x in names"</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">td</span> <span class="highATT">ng-if=</span><span class="highVAL">"$odd"</span> 
 <span class="highATT">style=</span><span class="highVAL">"background-color:#f1f1f1"</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Name }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">td</span> <span class="highATT">ng-if=</span><span class="highVAL">"$even"</span><span class="highGT">&gt;</span><span class="highATT">{{ 
 x.Name }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">td</span> <span class="highATT">ng-if=</span><span class="highVAL">"$odd"</span> <span class="highATT">style=</span><span class="highVAL">"background-color:#f1f1f1"</span><span class="highGT">&gt;</span><span class="highATT">{{ 
 x.Country }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">td</span> <span class="highATT">ng-if=</span><span class="highVAL">"$even"</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Country }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/tr</span><span class="highGT">&gt;</span><br>
 <span class="highLT">&lt;</span><span class="highELE">/table</span><span class="highGT">&gt;</span>
</div>
<br>
 <a class="tryitbtn" href="/try/tryit.php?filename=try_ng_tables_even" target="_blank">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-http.html" rel="prev"> AngularJS Http</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-sql.html" rel="next"> AngularJS SQL</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-tables.html" rel="prev"> AngularJS 表格</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-forms.html" rel="next"> AngularJS 表单</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			
<h1>AngularJS <span class="color_h1">SQL</span></h1>

<hr>
<p class="intro">
在前面章节中的代码也可以用于读取数据库中的数据。
</p>

<hr>
<h2>使用 PHP 从 MySQL 中获取数据</h2>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"customersCtrl"</span><span class="highGT">&gt;</span> <br><br><span class="highLT">&lt;</span><span class="highELE">table</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">tr</span> 
<span class="highATT">ng-repeat=</span><span class="highVAL">"x in names"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Name }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>
&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Country 
}}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/tr</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/table</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
 <span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>var app = angular.module('myApp', []);<br>app.controller('customersCtrl', 
 function($scope, $http) {<br>&nbsp;&nbsp;&nbsp; $http.get("http://www.runoob.com/try/angularjs/data/Customers_MySQL.php")<br>&nbsp;&nbsp;&nbsp; 
 .success(function (response) {$scope.names = response.records;});<br>});<br><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span></div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_customers_mysql" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>ASP.NET 中执行 SQL 获取数据</h2>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"customersCtrl"</span><span class="highGT">&gt;</span> <br><br><span class="highLT">&lt;</span><span class="highELE">table</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">tr</span> 
<span class="highATT">ng-repeat=</span><span class="highVAL">"x in names"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Name }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>
&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ x.Country 
}}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/tr</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/table</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
 <span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>var app = angular.module('myApp', []);<br>app.controller('customersCtrl', 
 function($scope, $http) {<br>&nbsp;&nbsp;&nbsp; $http.get("http://www.runoob.com/try/angularjs/data/Customers_SQL.aspx")<br>&nbsp;&nbsp;&nbsp; .success(function (response) {$scope.names = response.records;});<br>});<br><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span></div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_customers_sql" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>服务端代码</h2>
<p>以下列出了列出了几种服务端代码类型：</p>
<ol>
 <li>使用 PHP 和 MySQL。返回 JSON。</li>
 <li>使用 PHP 和 MS Access。返回 JSON。</li>
 <li>使用 ASP.NET, VB, 及 MS Access。 返回 JSON。</li>
 <li>使用 ASP.NET, Razor, 及 SQL Lite。 返回 JSON。</li>
</ol>
<hr>
<h2>跨域 HTTP 请求</h2>
<p>如果你需要从不同的服务器（不同域名）上获取数据就需要使用跨域 HTTP 请求。</p>
<p>跨域请求在网页上非常常见。很多网页从不同服务器上载入 CSS, 图片，Js脚本等。</p>
<p>在现代浏览器中，为了数据的安全，所有请求被严格限制在同一域名下，如果需要调用不同站点的数据，需要通过跨域来解决。</p>

<p>以下的 PHP 代码运行使用的网站进行跨域访问。</p>

<div class="example">
<div class="example_code">
	header("Access-Control-Allow-Origin: *");</div>
</div>
<p>更多跨域访问解决方案可参阅：<a href="/w3cnote/php-ajax-cross-border.html" target="_blank">PHP Ajax 跨域问题最佳解决方案</a>。</p>
<hr>
<h2>1. PHP 和 MySql 代码实例</h2>

<div class="example">
<div class="example_code">
&lt;?php<br>header("Access-Control-Allow-Origin: *");<br>header("Content-Type: 
 application/json; charset=UTF-8");<br><br>$conn = 
new mysqli("myServer", "myUser", "myPassword", "Northwind");<br><br>$result = $conn-&gt;query("SELECT 
CompanyName, City, Country FROM Customers");<br><br>$outp = "";<br>
while($rs = $result-&gt;fetch_array(MYSQLI_ASSOC)) {<br>&nbsp;&nbsp;&nbsp; 
if ($outp != "") {$outp .= ",";}<br>&nbsp;&nbsp;&nbsp; $outp .= '{"Name":"'&nbsp; . $rs["CompanyName"] . '",';<br>
&nbsp;&nbsp;&nbsp; $outp .= '"City":"'&nbsp;&nbsp; . $rs["City"]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; . '",';<br>
&nbsp;&nbsp;&nbsp; $outp .= '"Country":"'. $rs["Country"]&nbsp;&nbsp;&nbsp;&nbsp; . '"}';
<br>}<br>$outp ='{"records":['.$outp.']}';<br>$conn-&gt;close();<br><br>echo($outp);<br>?&gt;
</div>
</div>
<hr>
<h2>2. PHP 和 MS Access 代码实例</h2>

<div class="example">
<div class="example_code notranslate">
&lt;?php<br>header("Access-Control-Allow-Origin: *");<br>header("Content-Type: 
 application/json; charset=ISO-8859-1");<br><br>$conn = new COM("ADODB.Connection");<br>
$conn-&gt;open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb");<br>
<br>$rs = $conn-&gt;execute("SELECT CompanyName, City, Country FROM 
Customers");<br><br>$outp = "";<br>while (!$rs-&gt;EOF) {<br>&nbsp;&nbsp;&nbsp; 
if ($outp != "") {$outp .= ",";}<br>&nbsp;&nbsp;&nbsp; $outp .= '{"Name":"'&nbsp; . $rs["CompanyName"] . '",';<br>
&nbsp;&nbsp;&nbsp; $outp .= '"City":"'&nbsp;&nbsp; . $rs["City"]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; . '",';<br>&nbsp;&nbsp;&nbsp; $outp .= '"Country":"'. $rs["Country"]&nbsp;&nbsp;&nbsp;&nbsp; . '"}';
<br>&nbsp;&nbsp;&nbsp; $rs-&gt;MoveNext();<br>}<br>$outp ='{"records":['.$outp.']}';<br><br>
$conn-&gt;close();<br><br>echo ($outp);<br>?&gt;
</div>
</div>
<hr>
<h2>3. ASP.NET, VB 和 MS Access 代码实例</h2>

<div class="example">
<div class="example_code">
&lt;%@ Import Namespace="System.IO"%&gt;<br>&lt;%@ Import Namespace="System.Data"%&gt;<br>
&lt;%@ Import Namespace="System.Data.OleDb"%&gt;<br>&lt;%<br>
Response.AppendHeader("Access-Control-Allow-Origin", "*")<br>
 Response.AppendHeader("Content-type", "application/json")<br>Dim conn As 
OleDbConnection<br>Dim objAdapter As OleDbDataAdapter<br>Dim objTable As 
DataTable<br>Dim objRow As DataRow<br>Dim objDataSet As New DataSet()<br>
Dim outp<br>Dim c<br>conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data 
source=Northwind.mdb")<br>objAdapter = New OledbDataAdapter("SELECT 
CompanyName, City, Country FROM Customers", conn)<br>objAdapter.Fill(objDataSet, 
"myTable")<br>objTable=objDataSet.Tables("myTable")<br><br>outp = ""<br>
c = chr(34)<br>for each x in objTable.Rows<br>if outp &lt;&gt; "" then outp = outp &amp; ","<br>
outp = outp &amp; "{" &amp; c &amp; "Name"&nbsp;&nbsp;&nbsp; &amp; c &amp; ":" &amp; c &amp; x("CompanyName") 
&amp; c &amp; ","<br>
outp = outp &amp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; c &amp; "City"&nbsp;&nbsp;&nbsp; &amp; c &amp; ":" &amp; c 
&amp; x("City")&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &amp; c &amp; ","
<br>outp = outp &amp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; c &amp; "Country" &amp; c 
&amp; ":" &amp; c &amp; x("Country")&nbsp;&nbsp;&nbsp;&nbsp; &amp; c &amp; "}"<br>next<br><br>outp 
 ="{" &amp; c &amp; "records" &amp; c &amp; ":[" &amp; outp &amp; "]}"<br>response.write(outp)<br>conn.close<br>%&gt;
</div>
</div>
<hr>
<h2>4. ASP.NET, VB Razor 和 SQL Lite 代码实例</h2>

<div class="example">
<div class="example_code notranslate">
@{<br>Response.AppendHeader("Access-Control-Allow-Origin", "*")<br>
 Response.AppendHeader("Content-type", "application/json")<br>var db = 
Database.Open("Northwind");<br>var query = db.Query("SELECT CompanyName, 
City, Country FROM Customers");<br>var outp =""<br>var c = chr(34)<br>}<br>@foreach(var row in 
query)<br>{<br>if outp &lt;&gt; "" then outp = outp + ","<br>outp = outp + "{" + c + "Name"&nbsp;&nbsp;&nbsp; + c + ":" + c 
+ @row.CompanyName + c + ","<br>outp = outp +&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; c 
+ "City"&nbsp;&nbsp;&nbsp; + c + ":" + c 
+ @row.City&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + c + ","<br>outp = outp 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; c + "Country" + c 
+ ":" + c + @row.Country&nbsp;&nbsp;&nbsp;&nbsp; + c + "}"<br>}<br>outp ="{" + c 
 + "records" + c + ":[" + outp + "]}"<br>@outp
</div>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-tables.html" rel="prev"> AngularJS 表格</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-forms.html" rel="next"> AngularJS 表单</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-filters.html" rel="prev"> AngularJS 过滤器</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-html-events.html" rel="next"> AngularJS 事件</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">HTML DOM</span></h1>

<hr>
<p class="intro">AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。</p>
<hr>
<h2>ng-disabled 指令</h2>
<p><strong>ng-disabled</strong> 指令直接绑定应用程序数据到 HTML 的 disabled 属性。</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">""</span> <span class="highATT">ng-init=</span><span class="highVAL">"mySwitch=true"</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">ng-disabled=</span><span class="highVAL">"mySwitch"</span><span class="highGT">&gt;</span>点我!<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"checkbox"</span> <span class="highATT">ng-model=</span><span class="highVAL">"mySwitch"</span><span class="highGT">&gt;</span>按钮<br><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br>
	<br><span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><br><span class="highATT">{{ mySwitch }}</span><br><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br>
<br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span>
</div><br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_html_disabled" target="_blank">尝试一下 »</a>

</div>

<p>实例讲解：</p>
<p><strong>ng-disabled</strong> 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。</p>
<p><strong>ng-model</strong> 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。</p>
<p>如果 <strong>mySwitch</strong> 为<strong>true</strong>, 按钮将不可用:&nbsp; </p>
<div class="example">
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">disabled</span><span class="highGT">&gt;</span>点我！<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span>
</div>
</div>

<p>如果 <strong>mySwitch</strong> 为<strong>false</strong>, 按钮则可用:&nbsp; </p>
<div class="example">
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">button</span><span class="highGT">&gt;</span>点我!<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span>
</div>
</div>
<hr>
<h2>ng-show 指令</h2>
<p><strong>ng-show</strong> 指令隐藏或显示一个 HTML 元素。</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">""</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">p</span> <span class="highATT">ng-show=</span><span class="highVAL">"true"</span><span class="highGT">&gt;</span>我是可见的。<span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br>
<br><span class="highLT">&lt;</span><span class="highELE">p</span> <span class="highATT">ng-show=</span><span class="highVAL">"false"</span><span class="highGT">&gt;</span>我是不可见的。<span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_html_show" target="_blank">尝试一下 »</a>
</div>
<p>ng-show 指令根据 <strong>
value</strong> 的值来显示（隐藏）HTML 元素。</p>
<p>你可以使用表达式来计算布尔值（ true 或 false）:</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-brackets">&lt;</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">ng-app</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-var">ng-init</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">hour=13</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-code">
 
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">p</span><span class="hl-code"> </span><span class="hl-var">ng-show</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">hour &gt; 12</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">&gt;</span><span class="hl-code">我是可见的。</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">p</span><span class="hl-brackets">&gt;</span><span class="hl-code">
 
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">div</span><span class="hl-brackets">&gt;</span></div>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_html_show_if" target="_blank">尝试一下 »</a>
</div>
<br>
<table class="lamp"><tbody><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>在下一个章节中，我们将为大家更多通过点击按钮来隐藏 HTML 元素的实例。
</td>
</tr></tbody></table>

<hr>
<h2>ng-hide 指令</h2>
<p><strong>ng-hide</strong> 指令用于隐藏或显示 HTML 元素。</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">""</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">p</span> <span class="highATT">ng-hide=</span><span class="highVAL">"true"</span><span class="highGT">&gt;</span>我是不可见的。<span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br>
<br><span class="highLT">&lt;</span><span class="highELE">p</span> <span class="highATT">ng-hide=</span><span class="highVAL">"false"</span><span class="highGT">&gt;</span>我是可见的。<span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_html_hide" target="_blank">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-filters.html" rel="prev"> AngularJS 过滤器</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-html-events.html" rel="next"> AngularJS 事件</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-html-dom.html" rel="prev"> AngularJS HTML DOM</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-modules.html" rel="next"> AngularJS 模块</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">事件</span></h1>

<hr>
<p class="intro">AngularJS 有自己的 HTML 事件指令。</p>
<hr>
<h2>ng-click 指令</h2>
<p><strong>ng-click</strong> 
指令定义了 AngularJS 点击事件。 </p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">""</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">ng-click=</span><span class="highVAL">"count 
= count + 1"</span><span class="highGT">&gt;</span>点我！<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br>
<br><span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><span class="highATT">{{ count }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span></div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_events_click" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>隐藏 HTML 元素</h2>
<p><strong>ng-hide</strong> 指令用于设置应用部分是否可见。 </p>
<p><strong>ng-hide="true"</strong> 设置 HTML 元素不可见。</p>
<p><strong>ng-hide="false"</strong> 设置 HTML 元素可见。</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"personCtrl"</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">ng-click=</span><span class="highVAL">"toggle()"</span><span class="highGT">&gt;</span>>隐藏/显示<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br>
<br><span class="highLT">&lt;</span><span class="highELE">p</span> <span class="highATT">ng-hide=</span><span class="highVAL">"myVar"</span><span class="highGT">&gt;</span><br>
名: <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"firstName"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>
姓名: <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"lastName"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>Full Name: 
<span class="highATT">{{firstName + " " + lastName}}</span><br><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>var app = angular.module('myApp', []);<br>app.controller('personCtrl', 
 function($scope) {<br>&nbsp;&nbsp;&nbsp; $scope.firstName 
 = "John",<br>
&nbsp;&nbsp;&nbsp;&nbsp;$scope.lastName = "Doe"<br>&nbsp;&nbsp;&nbsp; $scope.myVar 
= false;<br>&nbsp;&nbsp;&nbsp; $scope.toggle = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
$scope.myVar = !$scope.myVar;<br>&nbsp;&nbsp;&nbsp; };<br>});<br><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_events_hide" target="_blank">尝试一下 »</a>
</div>
<p>应用解析:</p>
<p>第一部分 <strong>personController</strong>与控制器章节类似。</p>
<p>应用有一个默认属性: <strong>$scope.myVar 
= false;</strong></p>
<p><strong>ng-hide</strong> 指令设置 &lt;p&gt;元素及两个输入域是否可见， 根据 <strong>myVar</strong> 的值 (true 或 false) 来设置是否可见。 </p>
<p><strong>toggle()</strong> 函数用于切换 <strong>myVar</strong> 变量的值（true 和 false）。</p>
<p> <strong>ng-hide=&quot;true&quot;</strong> 让元素 <strong>不可见</strong>。</p>
<hr>
<h2>显示 HTML 元素</h2>
<p> <strong>ng-show</strong> 指令可用于设置应用中的一部分是否<strong>可见</strong> 。</p>
<p> <strong>ng-show=&quot;false&quot;</strong> 可以设置 HTML 元素
<strong>不可见</strong>。</p>
<p><strong>ng-show=&quot;true&quot;</strong> 可以以设置 HTML 元素可见。</p>
<p>以下实例使用了 ng-show 指令:</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"personCtrl"</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">ng-click=</span><span class="highVAL">"toggle()"</span><span class="highGT">&gt;</span>隐藏/显示<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br>
<br><span class="highLT">&lt;</span><span class="highELE">p</span> <span class="highATT">ng-show=</span><span class="highVAL">"myVar"</span><span class="highGT">&gt;</span><br>
名: <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"firstName"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>
姓: <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"lastName"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>姓名: 
<span class="highATT">{{firstName + " " + lastName}}</span><br><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>var app = angular.module('myApp', []);<br>app.controller('personCtrl', 
 function($scope) {<br>&nbsp;&nbsp;&nbsp; $scope.firstName 
 = "John",<br>&nbsp;&nbsp;&nbsp;&nbsp;$scope.lastName = "Doe"<br>&nbsp;&nbsp;&nbsp; $scope.myVar 
= true;<br>&nbsp;&nbsp;&nbsp; $scope.toggle = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
$scope.myVar = !$scope.myVar;<br>&nbsp;&nbsp;&nbsp; }<br>});<br><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_events" target="_blank">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-html-dom.html" rel="prev"> AngularJS HTML DOM</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-modules.html" rel="next"> AngularJS 模块</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isplainobject.html" title="jQuery.isPlainObject()   方法">jQuery.isPlainO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isnumeric.html" title="jQuery.isNumeric()  方法">jQuery.isNumeri...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-html-events.html" rel="prev"> AngularJS 事件</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-application.html" rel="next"> AngularJS 应用</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">模块</span></h1>

<hr>
<p class="intro">模块定义了一个应用程序。 </p>
<p class="intro">模块是应用程序中不同部分的容器。</p>
<p class="intro">模块是应用控制器的容器。</p>
<p class="intro">控制器通常属于一个模块。</p>
<hr>
<h2>创建模块</h2>
<p>你可以通过 AngularJS 的 <b>angular.module</b> 函数来创建模块：</p>
<div class="example">
<div class="example_code">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span><span class="highGT">&gt;</span>...<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br></div>
<div class="jsHigh">
	<br><span class="highELE">var</span> app = angular.module(<strong>"</strong>myApp<strong>"</strong>, []);
	<br><br></div><div class="htmlHigh"><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span></div></div>
</div>
<p>"myApp" 参数对应执行应用的 HTML 元素。</p>
<p>现在你可以在 AngularJS 应用中添加控制器，指令，过滤器等。</p>
<hr>
<h2>添加控制器</h2><p>
你可以使用 <b>ng-controller</b> 指令来添加应用的控制器:</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
<div class="htmlHigh">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"<b>myApp</b>"</span> <span class="highATT">ng-controller=</span><span class="highVAL"><strong>"myCtrl"</strong></span><strong><span class="highATT"></span></strong><span class="highGT">&gt;</span><br>
	<span class="highATT">{{ firstName + " " + lastName }}</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br><br></div>
<div class="jsHigh">
	<span class="highELE">var</span> 
	app 
	= angular.module(<strong>"myApp"</strong>, 
	[]);<br><br>app.controller(<strong>"myCtrl"</strong>, <span class="highELE">function</span>($scope) {<br>&nbsp;&nbsp;&nbsp; $scope.firstName 
	= <span class="highVAL">"John"</span>;<br>&nbsp;&nbsp;&nbsp; $scope.lastName 
	= <span class="highVAL">"Doe"</span>;<br>});<br><br></div><div class="htmlHigh"><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span></div>
</div><br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_module" target="_blank">尝试一下 »</a>
</div>
<p>你可以在 <a target="_top" title="AngularJS 控制器" href="angularjs-controllers.html"> AngularJS 控制器 </a> 章节学到更多关于控制器的知识。</p>
<hr>
<h2>添加指令</h2>
<p>AngularJS 提供了很多内置的指令，你可以使用它们来为你的应用添加功能。</p>
<p>完整的指令内容可以参阅 <a href="angularjs-reference.html">
AngularJS 参考手册</a>。</p>
<p>此外，你可以使用模块来为你应用添加自己的指令：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code htmlHigh">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">runoob-directive</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span>
	</div><br><div class="jsHigh"><span class="highELE">var</span> app = 
	angular.module(<span class="highVAL">"myApp"</span>, []);<br><br>app.directive(<span class="highVAL">"runoobDirective"</span>, 
	<span class="highELE">function</span>() {<br>&nbsp;&nbsp;&nbsp; <span class="highELE">return</span> {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	template : <span class="highVAL">"我在指令构造器中创建!"</span><br>&nbsp;&nbsp;&nbsp; };<br>
	});<br></div><div class="htmlHigh"><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span></div></div><br>
<a class="tryitbtn" href="/try/try.php?filename=try_ng_directive" target="_blank">尝试一下 »</a>
</div><p>你可以在 <a target="_top" title="AngularJS 指令" href="angularjs-directives.html"> AngularJS 指令 </a> 章节学到更多关于指令的知识。</p>

<hr>

<h2>模块和控制器包含在 JS 文件中</h2>
<p>通常 AngularJS 应用程序将模块和控制器包含在  JavaScript 文件中。</p>
<p>在以下实例中， "myApp.js" 包含了应用模块的定义程序， "myCtrl.js" 文件包含了控制器：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
	<span class="highLT">&lt;</span><span class="highELE">!DOCTYPE</span> <span class="highATT">html</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">html</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br>
    <span class="highLT">&lt;</span><span class="highELE">body</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"<strong>myApp</strong>"</span> 
	<span class="highATT">ng-controller=</span><span class="highVAL">"<strong>myCtrl</strong>"</span><span class="highGT">&gt;</span><br><span class="highATT">{{ firstName + " " + lastName }}</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"<strong>myApp.js</strong>"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"<strong>myCtrl.js</strong>"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/html</span><span class="highGT">&gt;</span>
</div>
<br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_module_files" target="_blank">尝试一下 »</a>
</div>
<br>
<div class="example">
<h2 class="example">myApp.js</h2>
<div class="example_code notranslate">
var app = angular.module(<strong>"myApp"</strong>, []);
</div>
</div>
<br>
<table class="lamp"><tbody><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>在模块定义中 [] 参数用于定义模块的依赖关系。<br>
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。</td>
</tr></tbody></table>
<br>
<div class="example">
<h2 class="example">myCtrl.js</h2>
<div class="example_code notranslate">
app.controller(<strong>"myCtrl"</strong>, function($scope) {<br>
&nbsp;&nbsp;&nbsp; $scope.firstName	= "John";<br>
&nbsp;&nbsp;&nbsp; $scope.lastName= "Doe";<br>
});
</div>
</div>
<hr>
<h2>函数会影响到全局命名空间</h2>
<p>JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。</p>
<p>AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。</p>

<hr>
<h2>什么时候载入库?</h2>

<table class="lamp"><tbody><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。</td>
</tr></tbody></table>

<p>对于 HTML 应用程序，通常建议把所有的脚本都放置在 &lt;body&gt; 元素的最底部。</p>
<p>这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。</p>
<p>在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 &lt;head&gt; 区域被加载。</p>
<p>在我们的实例中，AngularJS 在 &lt;head&gt; 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。</p>
<p>另一个解决方案是在 &lt;body&gt;  元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：</p>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">!DOCTYPE</span> <span class="highATT">html</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">html</span><span class="highGT">&gt;</span><br>

<span class="highLT">&lt;</span><span class="highELE">head</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">meta</span> <span class="highATT">charset</span>=<span class="highVAL">"utf-8"</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/head</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">body</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> 
<span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br><span class="highATT">{{ firstName + " " + lastName }}</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>var app = angular.module("myApp", 
[]);<br>app.controller("myCtrl", function($scope) {<br>&nbsp;&nbsp;&nbsp; $scope.firstName 
= "John";<br>&nbsp;&nbsp;&nbsp; $scope.lastName 
= "Doe";<br>});<br><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/html</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_module_body" target="_blank">尝试一下 »</a>
</div>
			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-html-events.html" rel="prev"> AngularJS 事件</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-application.html" rel="next"> AngularJS 应用</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-sql.html" rel="prev"> AngularJS SQL</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-validation.html" rel="next"> AngularJS 输入验证</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">表单</span></h1>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<hr>
<p class="intro">AngularJS 表单是输入控件的集合。</p>

<hr>

<h2>HTML 控件</h2>
<p>以下 HTML input 元素被称为 HTML 控件:</p>
<ul>
<li>input 元素</li>
	<li>select 元素</li>
	<li>button 元素</li>
	<li>textarea 元素</li>
</ul>
<h2>HTML 表单</h2>
<p>HTML 表单通常与 HTML 控件同时存在。</p>

<hr>
<h2> AngularJS 表单实例</h2>

<div ng-app="myEx" ng-controller="ExampleController">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

<script>
angular.module('myEx', []).controller('ExampleController', function($scope) {
    $scope.master = {"firstName":"John","lastName":"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>


<hr>
<h2>应用程序代码</h2>
<div class="example">
<div class="example_code">
	<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"formCtrl"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">form</span> 
	<span class="highATT">novalidate</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; First Name:<span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"user.firstName"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; Last 
	Name:<span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"user.lastName"</span><span class="highGT">&gt;</span><br>
	&nbsp;&nbsp;&nbsp; 
	<span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">ng-click=</span><span class="highVAL">"reset()"</span><span class="highGT">&gt;</span>RESET<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br>&nbsp; 
	<span class="highLT">&lt;</span><span class="highELE">/form</span><span class="highGT">&gt;</span><br>
	&nbsp; <span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span>form = <span class="highATT">{{<span style="display:none">{</span>user}}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br>
	&nbsp; <span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span>master = <span class="highATT">{{<span style="display:none">{</span>master}}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>
	var app =
	angular.module('myApp', []);<br>app.controller('formCtrl',  
    function($scope) {<br>
	&nbsp;&nbsp;&nbsp; $scope.master = {firstName: "John", lastName: "Doe"};<br>
	&nbsp;&nbsp;&nbsp; $scope.reset = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $scope.user 
	= angular.copy($scope.master);<br>&nbsp;&nbsp;&nbsp; };<br>&nbsp;&nbsp;&nbsp; 
	$scope.reset();<br>});<br>
	<span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_form" target="_blank">尝试一下 »</a>
</div>

<table class="lamp"><tbody><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td><strong>novalidate</strong> 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。</td>
</tr></tbody></table>

<hr>
<h2>实例解析</h2>
<p>
<strong>ng-app</strong> 指令定义了 AngularJS 应用。</p>
<p>
<strong>ng-controller</strong> 指令定义了应用控制器。</p>
<p>
<strong>ng-model</strong> 指令绑定了两个 input 元素到模型的 <strong>
user</strong> 对象。</p>
<p>
<strong>formCtrl</strong> 函数设置了
<strong>master</strong> 对象的初始值，并定义了 <strong>reset()</strong> 方法。</p>
<p>
<strong>reset()</strong> 方法设置了 <strong>user</strong> 
对象等于 <strong>master</strong> 对象。 </p>

<p>
<strong>ng-click</strong> 指令调用了 <strong>reset()</strong> 
方法，且在点击按钮时调用。</p>
<p>
novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。</p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-sql.html" rel="prev"> AngularJS SQL</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-validation.html" rel="next"> AngularJS 输入验证</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-forms.html" rel="prev"> AngularJS 表单</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-bootstrap.html" rel="next"> AngularJS Bootstrap</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">输入验证</span></h1>

<hr>
<p class="intro">AngularJS 表单和控件可以验证输入的数据。</p>

<hr>
<h2>输入验证</h2>
<p>在前面的几个章节中，你已经学到关于 AngularJS 表单和控件的知识。</p>
<p>AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。</p>
<p>
</p>
<table class="lamp"><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。</td>
</tr></table>

<hr>
<h2>应用代码</h2>
<div class="example">
<div class="example_code">
	<span class="highLT">&lt;</span><span class="highELE">!DOCTYPE</span> <span class="highATT">html</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">html</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br>
    <span class="highLT">&lt;</span><span class="highELE">body</span><span class="highGT">&gt;</span><br>
	<br><span class="highLT">&lt;</span><span class="highELE">h2</span><span class="highGT">&gt;</span>Validation Example<span class="highLT">&lt;</span><span class="highELE">/h2</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">form&nbsp;</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span><span class="highATT">&nbsp; 
	ng-controller=</span><span class="highVAL">"validateCtrl"</span><span class="highATT"><br>name=</span><span class="highVAL">"myForm"</span> <span class="highATT">novalidate</span><span class="highGT">&gt;</span><br><br>
	<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span>用户名:<span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">name=</span><span class="highVAL">"user"</span> <span class="highATT">ng-model=</span><span class="highVAL">"user"</span> 
	<span class="highATT">required</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">style=</span><span class="highVAL">"color:red"</span> <span class="highATT">ng-show=</span><span class="highVAL">"myForm.user.$dirty &amp;&amp; 
	myForm.user.$invalid"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">ng-show=</span><span class="highVAL">"myForm.user.$error.required"</span><span class="highGT">&gt;</span>用户名是必须的。<span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span>邮箱:<span class="highLT">&lt;</span><span class="highELE">br</span><span class="highGT">&gt;</span><br>&nbsp; 
	<span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"email"</span> <span class="highATT">name=</span><span class="highVAL">"email"</span> <span class="highATT">ng-model=</span><span class="highVAL">"email"</span> <span class="highATT">required</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">span</span> 
	<span class="highATT">style=</span><span class="highVAL">"color:red"</span> <span class="highATT">ng-show=</span><span class="highVAL">"myForm.email.$dirty &amp;&amp; myForm.email.$invalid"</span><span class="highGT">&gt;</span><br>&nbsp; 
	<span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">ng-show=</span><span class="highVAL">"myForm.email.$error.required"</span><span class="highGT">&gt;</span>邮箱是必须的。<span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span><br>&nbsp; 
	<span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">ng-show=</span><span class="highVAL">"myForm.email.$error.email"</span><span class="highGT">&gt;</span>非法的邮箱。<span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span><br>&nbsp; 
	<span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"submit"</span><span class="highATT"><br>&nbsp; 
	ng-disabled=</span><span class="highVAL">"myForm.user.$dirty &amp;&amp; myForm.user.$invalid ||<br>&nbsp; 
	myForm.email.$dirty &amp;&amp; myForm.email.$invalid"</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/form</span><span class="highGT">&gt;</span><br>
	<br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>var app = angular.module('myApp', []);<br>app.controller('validateCtrl', 
    function($scope) {<br>&nbsp;&nbsp;&nbsp; 
	$scope.user = 'John Doe';<br>&nbsp;&nbsp;&nbsp; $scope.email = 'john.doe@gmail.com';<br>
	});<br><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/html</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_validate" target="_blank">尝试一下 »</a>
</div>
<br>
<table class="lamp"><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td> HTML 表单属性 <strong>novalidate</strong> 用于禁用浏览器默认的验证。</td>
</tr></table>

<hr>
<h2>实例解析</h2>
<p>
 AngularJS  <strong>ng-model</strong> 指令用于绑定输入元素到模型中。</p>
<p>
<p>
模型对象有两个属性： <strong>user</strong> 和 <strong>email</strong>。</p>
<p>
我们使用了 <strong>ng-show</strong>指令， color:red 在邮件是 <strong>$dirty</strong> 或 <strong>$invalid</strong> 才显示。</p>
<table class="reference">
 <tbody><tr>
  <th>属性</th>
  <th>描述</th>
 </tr>
 <tr>
  <td>$dirty</td>
  <td>表单有填写记录</td>
 </tr>
 <tr>
  <td>$valid</td>
  <td>字段内容合法的</td>
 </tr>
 <tr>
  <td>$invalid</td>
  <td>字段内容是非法的</td>
 </tr>
 <tr>
  <td>$pristine</td>
  <td>表单没有填写记录</td>
 </tr>
</tbody></table>
			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-forms.html" rel="prev"> AngularJS 表单</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-bootstrap.html" rel="next"> AngularJS Bootstrap</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-include.html" rel="prev"> AngularJS 包含</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-model.html" rel="next"> AngularJS ng-model 指令</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">API</span></h1>

<hr>
<p class="intro">API 意为 <strong>A</strong>pplication 
<strong>P</strong>rogramming <strong>I</strong>nterface（应用程序编程接口）。</p>

<hr>
<h2>AngularJS 全局 API</h2>
<p> AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：</p>
<ul>
 <li>比较对象</li>
 <li>迭代对象</li>
 <li>转换对象</li>
</ul>
<p>全局 API 函数使用 angular 对象进行访问。</p>

<p>以下列出了一些通用的 API 函数：</p>
<table class="reference">
 <tbody><tr>
  <th>API</th>
  <th>描述</th>
 </tr>
 <tr>
  <td>angular.lowercase()</td>
  <td>转换字符串为小写</td>
 </tr>
 <tr>
  <td>angular.uppercase()</td>
  <td>转换字符串为大写</td>
 </tr>
 <tr>
  <td>angular.isString()</td>
  <td>判断给定的对象是否为字符串，如果是返回 true。  </td>
 </tr>
 <tr>
  <td>angular.isNumber()</td>
  <td>判断给定的对象是否为数字，如果是返回 true。</td>
 </tr>
</tbody></table>

<hr>
<h3>angular.lowercase()</h3>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br>
 <span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><span class="highATT">{{ x1 }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><span class="highATT">{{ x2 }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>
var app = angular.module('myApp', []);<br>
app.controller('myCtrl', function($scope) {<br>
$scope.x1 = "JOHN";<br>
$scope.x2 = angular.lowercase($scope.x1);<br>
});<br>
<span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
<br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_api_lowercase" target="_blank">尝试一下 »</a>
</div>
<h3>angular.uppercase()</h3>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br>
 <span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><span class="highATT">{{ x1 }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><span class="highATT">{{ x2 }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>
var app = angular.module('myApp', []);<br>
app.controller('myCtrl', function($scope) {<br>
$scope.x1 = "John";<br>
$scope.x2 = angular.uppercase($scope.x1);<br>
});<br>
<span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
<br>
 <a class="tryitbtn" href="/try/tryit.php?filename=try_ng_api_uppercase" target="_blank">尝试一下 »</a>
</div>
<h3>angular.isString()</h3>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br>
 <span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><span class="highATT">{{ x1 }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><span class="highATT">{{ x2 }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>
var app = angular.module('myApp', []);<br>
app.controller('myCtrl', function($scope) {<br>
$scope.x1 = "JOHN";<br>
$scope.x2 = angular.isString($scope.x1);<br>
});<br>
<span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
<br>
 <a class="tryitbtn" href="/try/tryit.php?filename=try_ng_api_isstring" target="_blank">尝试一下 »</a>
</div>
<h3>angular.isNumber()</h3>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myCtrl"</span><span class="highGT">&gt;</span><br>
 <span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><span class="highATT">{{ x1 }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><span class="highATT">{{ x2 }}</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br>
var app = angular.module('myApp', []);<br>
app.controller('myCtrl', function($scope) {<br>
$scope.x1 = "JOHN";<br>
$scope.x2 = angular.isNumber($scope.x1);<br>
});<br>
<span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
<br>
 <a class="tryitbtn" href="/try/tryit.php?filename=try_ng_api_isnumber" target="_blank">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-include.html" rel="prev"> AngularJS 包含</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-model.html" rel="next"> AngularJS ng-model 指令</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<form action="index.php">
<input class="placeholder" value="搜索……" name="s" autocomplete="off">
</form>
</div>
<div class="row">
<div class="col logo">
<h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
</div>
<div class="col right-list">
<button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
</div>
<div class="col search search-desktop last">
<form action="http://www.runoob.com/" target="_blank">
<input class="placeholder" id="s" name="s" value="搜索……" autocomplete="off">
</form>
</div>
</div>
</div>
<div class="container navigation">
<div class="row">
<div class="col nav">
<ul class="pc-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
<li><a href="/sql/sql-tutorial.html">SQL</a></li>
<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
<li><a href="/php/php-tutorial.html">PHP</a></li>
<li><a href="/python/python-tutorial.html">Python</a></li>
<li><a href="/cprogramming/c-tutorial.html">C</a></li>
<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
<li><a href="/java/java-tutorial.html">Java</a></li>
<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
<li><a href="/sitemap">更多……</a></li>
</ul>
<ul class="mobile-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<a href="javascript:void(0)" class="search-reveal">Search</a>
</ul>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="col left-column">
<div class="tab">AngularJS 教程</div>
<div class="sidebar-box gallery-list">
<div class="design" id="leftcolumn">
<a target="_top" title="AngularJS 教程" href="/angularjs/angularjs-tutorial.html">
AngularJS 教程 </a>
<a target="_top" title="AngularJS 简介" href="/angularjs/angularjs-intro.html">
AngularJS 简介 </a>
<a target="_top" title="AngularJS 表达式" href="/angularjs/angularjs-expressions.html">
AngularJS 表达式 </a>
<a target="_top" title="AngularJS 指令" href="/angularjs/angularjs-directives.html">
AngularJS 指令 </a>
<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a> <a target="_top" title="AngularJS 控制器" href="/angularjs/angularjs-controllers.html">
AngularJS 控制器 </a>
<a target="_top" title="AngularJS 过滤器" href="/angularjs/angularjs-filters.html">
AngularJS 过滤器 </a>
<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a> <a target="_top" title="AngularJS HTML DOM" href="/angularjs/angularjs-html-dom.html">
AngularJS HTML DOM </a>
<a target="_top" title="AngularJS 事件" href="/angularjs/angularjs-html-events.html">
AngularJS 事件 </a>
<a target="_top" title="AngularJS 模块" href="/angularjs/angularjs-modules.html">
AngularJS 模块 </a>
<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a> <a target="_top" title="AngularJS 应用" href="/angularjs/angularjs-application.html">
AngularJS 应用 </a>
<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2> <a target="_top" title="AngularJS 实例" href="/angularjs/angularjs-examples.html">
AngularJS 实例 </a>
<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2> <a target="_top" title="AngularJS 参考手册" href="/angularjs/angularjs-reference.html">
AngularJS 参考手册 </a>
</div>
</div>
</div> <div class="col middle-column">
<div class="article">
<div class="article-heading-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="horizontal"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-validation.html" rel="prev"> AngularJS 输入验证</a> </div>
<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-include.html" rel="next"> AngularJS 包含</a> →</div>
</div>
<div class="article-body">
<div class="article-intro" id="content">
<h1>AngularJS <span class="color_h1">Bootstrap</span>
</h1>
<hr>
<p class="intro">AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。</p>
<p class="intro"><a href="/bootstrap/bootstrap-tutorial.html" target="_blank" title="Bootstrap教程">查看 Bootstrap教程</a>。</p>
<hr>
<h2>Bootstrap</h2>
<p>你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 &lt;head&gt;元素中添加如下代码:</p>
<div class="example">
<div class="example_code">
&lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
</div>
</div>
<p>如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：</p>
<div class="example">
<div class="example_code notranslate htmlHigh">
&lt;link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
</div>
</div>
<p>以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。</p>
<p>
</p>
<hr>
<h2>HTML 代码</h2>
<div class="example">
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">!DOCTYPE</span> <span class="highATT">html</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">html</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">link</span> <span class="highATT">rel=</span><span class="highVAL">"stylesheet"</span>
<span class="highATT">href=</span><span class="highVAL">"http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">body</span>
<span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"userCtrl"</span><span class="highGT">&gt;</span><br>
<br><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"container"</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">h3</span><span class="highGT">&gt;</span>Users<span class="highLT">&lt;</span><span class="highELE">/h3</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">table</span>
<span class="highATT">class=</span><span class="highVAL">"table table-striped"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">thead</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">tr</span><span class="highGT">&gt;</span><br>
&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">th</span><span class="highGT">&gt;</span>Edit<span class="highLT">&lt;</span><span class="highELE">/th</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">th</span><span class="highGT">&gt;</span>First
Name<span class="highLT">&lt;</span><span class="highELE">/th</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">th</span><span class="highGT">&gt;</span>Last Name<span class="highLT">&lt;</span><span class="highELE">/th</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/tr</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/thead</span><span class="highGT">&gt;</span><br>
&nbsp; <span class="highLT">&lt;</span><span class="highELE">tbody</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">tr</span>
<span class="highATT">ng-repeat=</span><span class="highVAL">"user in users"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">class=</span><span class="highVAL">"btn"</span> <span class="highATT">ng-click=</span><span class="highVAL">"editUser(user.id)"</span><span class="highGT">&gt;</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">class=</span><span class="highVAL">"glyphicon glyphicon-pencil"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span>&amp;nbsp;&amp;nbsp;Edit<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ user.fName }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>
&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ user.lName }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>
&nbsp;
<span class="highLT">&lt;</span><span class="highELE">/tr</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/tbody</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/table</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">hr</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">class=</span><span class="highVAL">"btn btn-success"</span>
<span class="highATT">ng-click=</span><span class="highVAL">"editUser('new')"</span><span class="highGT">&gt;</span><br>
&nbsp; <span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">class=</span><span class="highVAL">"glyphicon glyphicon-user"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span> Create New User<br>
<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">hr</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">h3</span> <span class="highATT">ng-show=</span><span class="highVAL">"edit"</span><span class="highGT">&gt;</span>Create New User:<span class="highLT">&lt;</span><span class="highELE">/h3</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">h3</span> <span class="highATT">ng-hide=</span><span class="highVAL">"edit"</span><span class="highGT">&gt;</span>Edit
User:<span class="highLT">&lt;</span><span class="highELE">/h3</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">form</span> <span class="highATT">class=</span><span class="highVAL">"form-horizontal"</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"form-group"</span><span class="highGT">&gt;</span><br>
&nbsp;
<span class="highLT">&lt;</span><span class="highELE">label</span> <span class="highATT">class=</span><span class="highVAL">"col-sm-2 control-label"</span><span class="highGT">&gt;</span>First Name:<span class="highLT">&lt;</span><span class="highELE">/label</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">div</span>
<span class="highATT">class=</span><span class="highVAL">"col-sm-10"</span><span class="highGT">&gt;</span><br>
&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"fName"</span> <span class="highATT">ng-disabled=</span><span class="highVAL">"!edit"</span>
<span class="highATT">placeholder=</span><span class="highVAL">"First Name"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span> <br><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"form-group"</span><span class="highGT">&gt;</span><br>
&nbsp;
<span class="highLT">&lt;</span><span class="highELE">label</span> <span class="highATT">class=</span><span class="highVAL">"col-sm-2 control-label"</span><span class="highGT">&gt;</span>Last Name:<span class="highLT">&lt;</span><span class="highELE">/label</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">div</span>
<span class="highATT">class=</span><span class="highVAL">"col-sm-10"</span><span class="highGT">&gt;</span><br>
&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"lName"</span> <span class="highATT">ng-disabled=</span><span class="highVAL">"!edit"</span>
<span class="highATT">placeholder=</span><span class="highVAL">"Last Name"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"form-group"</span><span class="highGT">&gt;</span><br>
&nbsp;
<span class="highLT">&lt;</span><span class="highELE">label</span> <span class="highATT">class=</span><span class="highVAL">"col-sm-2 control-label"</span><span class="highGT">&gt;</span>Password:<span class="highLT">&lt;</span><span class="highELE">/label</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">div</span>
<span class="highATT">class=</span><span class="highVAL">"col-sm-10"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"password"</span> <span class="highATT">ng-model=</span><span class="highVAL">"passw1"</span>
<span class="highATT">placeholder=</span><span class="highVAL">"Password"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"form-group"</span><span class="highGT">&gt;</span><br>
&nbsp;
<span class="highLT">&lt;</span><span class="highELE">label</span> <span class="highATT">class=</span><span class="highVAL">"col-sm-2 control-label"</span><span class="highGT">&gt;</span>Repeat:<span class="highLT">&lt;</span><span class="highELE">/label</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">div</span>
<span class="highATT">class=</span><span class="highVAL">"col-sm-10"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"password"</span> <span class="highATT">ng-model=</span><span class="highVAL">"passw2"</span>
<span class="highATT">placeholder=</span><span class="highVAL">"Repeat Password"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/form</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">hr</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">class=</span><span class="highVAL">"btn btn-success"</span> <span class="highATT">ng-disabled=</span><span class="highVAL">"error || incomplete"</span><span class="highGT">&gt;</span><br>
&nbsp; <span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">class=</span><span class="highVAL">"glyphicon glyphicon-save"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span> Save
Changes<br><span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src =</span><span class="highVAL"> "myUsers.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/html</span><span class="highGT">&gt;</span></div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_myusers" target="_blank">尝试一下 »</a>
</div>
<br><hr>
<h2>指令解析</h2>
<table class="reference">
<tr>
<th>AngularJS 指令</th>
<th>描述</th>
</tr>
<tr>
<td>&lt;html ng-app</td>
<td>为 &lt;html&gt; 元素定义一个应用(未命名)</td>
</tr>
<tr>
<td>&lt;body ng-controller</td>
<td>为 &lt;body&gt; 元素定义一个控制器</td>
</tr>
<tr>
<td>&lt;tr ng-repeat</td>
<td>循环 users 对象数组，每个 user 对象放在 &lt;tr&gt; 元素中。</td>
</tr>
<tr>
<td>&lt;button ng-click</td>
<td>当点击 &lt;button&gt; 元素时调用函数 editUser()</td>
</tr>
<tr>
<td>&lt;h3 ng-show</td>
<td> 如果 edit = true 显示 &lt;h3&gt; 元素 </td>
</tr>
<tr>
<td>&lt;h3 ng-hide</td>
<td>如果 edit = true 隐藏 &lt;h3&gt; 元素</td>
</tr>
<tr>
<td>&lt;input ng-model</td>
<td>为应用程序绑定 &lt;input&gt; 元素</td>
</tr>
<tr>
<td>&lt;button ng-disabled</td>
<td>如果发生错误或者 ncomplete = true 禁用 &lt;button&gt; 元素</td>
</tr>
</table>
<br><hr>
<h2>Bootstrap 类解析</h2>
<table class="reference">
<tr>
<th>元素</th>
<th>Bootstrap 类</th>
<th>定义</th>
</tr>
<tr>
<td>&lt;div&gt;</td>
<td>container</td>
<td>内容容器</td>
</tr>
<tr>
<td>&lt;table&gt;</td>
<td>table</td>
<td>表格</td>
</tr>
<tr>
<td>&lt;table&gt;</td>
<td>table-striped</td>
<td>带条纹背景的表格</td>
</tr>
<tr>
<td>&lt;button&gt;</td>
<td>btn</td>
<td>按钮</td>
</tr>
<tr>
<td>&lt;button&gt;</td>
<td>btn-success</td>
<td>成功按钮</td>
</tr>
<tr>
<td>&lt;span&gt;</td>
<td>glyphicon</td>
<td>字形图标</td>
</tr>
<tr>
<td>&lt;span&gt;</td>
<td>glyphicon-pencil</td>
<td>铅笔图标</td>
</tr>
<tr>
<td>&lt;span&gt;</td>
<td>glyphicon-user</td>
<td>用户图标</td>
</tr>
<tr>
<td>&lt;span&gt;</td>
<td>glyphicon-save</td>
<td>保存图标</td>
</tr>
<tr>
<td>&lt;form&gt;</td>
<td>form-horizontal</td>
<td>水平表格</td>
</tr>
<tr>
<td>&lt;div&gt;</td>
<td>form-group</td>
<td>表单组</td>
</tr>
<tr>
<td>&lt;label&gt;</td>
<td>control-label</td>
<td>控制器标签</td>
</tr>
<tr>
<td>&lt;label&gt;</td>
<td>col-sm-2</td>
<td>跨越 2 列</td>
</tr>
<tr>
<td>&lt;div&gt;</td>
<td>col-sm-10</td>
<td>跨越 10 列</td>
</tr>
</table>
<br><hr>
<h2>JavaScript 代码</h2>
<div class="example">
<h2 class="example">myUsers.js</h2>
<div class="example_code">
angular.module(<span class="highVAL">'myApp'</span>, []).controller(<span class="highVAL">'userCtrl'</span>,
<span class="highELE">function</span>($scope) {<br>$scope.fName
= <span class="highVAL">''</span>;<br>$scope.lName = <span class="highVAL">''</span>;<br>$scope.passw1 = <span class="highVAL">''</span>;<br>$scope.passw2 = <span class="highVAL">''</span>;<br>
$scope.users = [<br>{id:<span class="highVAL">1</span>, fName:<span class="highVAL">'Hege'</span>,&nbsp;lName:<span class="highVAL">"Pege"</span> },<br>
{id:<span class="highVAL">2</span>, fName:<span class="highVAL">'Kim'</span>,&nbsp;&nbsp;lName:<span class="highVAL">"Pim"</span> },<br>{id:<span class="highVAL">3</span>, fName:<span class="highVAL">'Sal'</span>,&nbsp;&nbsp;lName:<span class="highVAL">"Smith"</span> },<br>
{id:<span class="highVAL">4</span>, fName:<span class="highVAL">'Jack'</span>,&nbsp;lName:<span class="highVAL">"Jones"</span> },<br>{id:<span class="highVAL">5</span>, fName:<span class="highVAL">'John'</span>,&nbsp;lName:<span class="highVAL">"Doe"</span>
},<br>{id:<span class="highVAL">6</span>, fName:<span class="highVAL">'Peter'</span>,lName:<span class="highVAL">"Pan"</span> }<br>];<br>$scope.edit = <span class="highVAL">true</span>;<br>$scope.error = <span class="highVAL">false</span>;<br>
$scope.incomplete = <span class="highVAL">false</span>; <br><br>$scope.editUser =
<span class="highELE">function</span>(id) {<br>&nbsp; <span class="highELE">if</span> (id == <span class="highVAL">'new'</span>) {<br>
&nbsp;&nbsp;&nbsp; $scope.edit = <span class="highVAL">true</span>;<br>&nbsp;&nbsp;&nbsp; $scope.incomplete
= <span class="highVAL">true</span>;<br>&nbsp;&nbsp;&nbsp; $scope.fName = <span class="highVAL">''</span>;<br>&nbsp;&nbsp;&nbsp; $scope.lName
= <span class="highVAL">''</span>;<br>&nbsp;&nbsp;&nbsp; } <span class="highELE">else</span> {<br>&nbsp;&nbsp;&nbsp; $scope.edit = <span class="highVAL">false</span>;<br>&nbsp;&nbsp;&nbsp; $scope.fName
= $scope.users[id-1].fName;<br>&nbsp;&nbsp;&nbsp; $scope.lName
= $scope.users[id-1].lName; <br>&nbsp; }<br>};<br><br>$scope.$watch(<span class="highVAL">'passw1'</span>,<span class="highELE">function</span>()
{$scope.test();});<br>$scope.$watch(<span class="highVAL">'passw2'</span>,<span class="highELE">function</span>() {$scope.test();});<br>
$scope.$watch(<span class="highVAL">'fName'</span>,&nbsp;<span class="highELE">function</span>() {$scope.test();});<br>$scope.$watch(<span class="highVAL">'lName'</span>,&nbsp;<span class="highELE">function</span>() {$scope.test();});<br><br>$scope.test = <span class="highELE">function</span>() {<br>&nbsp; <span class="highELE">if</span>
($scope.passw1 !== $scope.passw2) {<br>&nbsp;&nbsp;&nbsp; $scope.error =
<span class="highVAL">true</span>;<br>&nbsp;&nbsp;&nbsp; } <span class="highELE">else</span> {<br>&nbsp;&nbsp;&nbsp; $scope.error =
<span class="highVAL">false</span>;<br>&nbsp; }<br>&nbsp; $scope.incomplete = <span class="highVAL">false</span>;<br>&nbsp; <span class="highELE">if</span> ($scope.edit
&amp;&amp; (!$scope.fName.length ||<br>&nbsp; !$scope.lName.length ||<br>&nbsp;
!$scope.passw1.length || !$scope.passw2.length)) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scope.incomplete = <span class="highVAL">true</span>;<br>&nbsp; }<br>};<br><br>});</div>
</div>
<br><hr>
<h2>JavaScript 代码解析</h2>
<table class="reference">
<tr>
<th>Scope 属性</th>
<th>用途</th>
</tr>
<tr>
<td>$scope.fName</td>
<td>模型变量 (用户名)</td>
</tr>
<tr>
<td>$scope.lName</td>
<td>模型变量 (用户姓)</td>
</tr>
<tr>
<td>$scope.passw1</td>
<td>模型变量 (用户密码 1)</td>
</tr>
<tr>
<td>$scope.passw2</td>
<td>模型变量 (用户密码 2)</td>
</tr>
<tr>
<td>$scope.users</td>
<td>模型变量 (用户的数组)</td>
</tr>
<tr>
<td>$scope.edit</td>
<td>当用户点击创建用户时设置为true。</td>
</tr>
<tr>
<td>$scope.error</td>
<td>如果 passw1 不等于 passw2 设置为 true</td>
</tr>
<tr>
<td>$scope.incomplete</td>
<td>如果每个字段都为空(length = 0)设置为 true </td>
</tr>
<tr>
<td>$scope.editUser</td>
<td>设置模型变量</td>
</tr>
<tr>
<td>$scope.watch</td>
<td>监控模型变量</td>
</tr>
<tr>
<td>$scope.test</td>
<td>验证模型变量的错误和完整性</td>
</tr>
</table>
</div>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-validation.html" rel="prev"> AngularJS 输入验证</a> </div>
<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-include.html" rel="next"> AngularJS 包含</a> →</div>
</div>
<div class="sidebar-box ad-box ad-box-large">
<div class="ad-336280">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="rectangle"></ins>
<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
</div>
</div>
</div>
</div>
<div class="fivecol last right-column">
<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
<div class="sidebar-box">
<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
<div class="qqinfo">
</div>
</div>
<div class="tab tab-light-blue">分类导航</div>
<div class="sidebar-box sidebar-cate">
<div class="sidebar-tree">
<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul> </div>
</div>
<br>
<div class="sidebar-box ad-box ad-box-large">
<div class="sidebar-box advertise-here">
<a href="javascript:void(0);">Advertisement</a>
</div>
<div class="ad-600160">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="4106274865"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
</div>
</div></div>
</div>
<div id="footer" class="mar-t50">
<div class="w3cschoolcc-block">
<div class="w3cschoolcc cf">
<dl>
<dt>
在线实例
</dt>
<dd>
&middot;<a href="/html/html-examples.html">HTML 实例</a>
</dd>
<dd>
&middot;<a href="/css/css-examples.html">CSS 实例</a>
</dd>
<dd>
&middot;<a href="/js/js-examples.html">JavaScript 实例</a>
</dd>
<dd>
&middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
</dd>
<dd>
&middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
</dd>
<dd>
&middot;<a href="/xml/xml-examples.html">XML 实例</a>
</dd>
<dd>
&middot;<a href="/java/java-examples.html">Java 实例</a>
</dd>
</dl>
<dl>
<dt>
字符集&工具
</dt>
<dd>
&middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
</dd>
<dd>
&middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
</dd>
<dd>
&middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
</dd>
<dd>
&middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
</dd>
<dd>
&middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
</dd>
<dd>
&middot; <a href="/jsontool">JSON 格式化工具</a>
</dd>
</dl>
<dl>
<dt>
最新更新
</dt>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/event-contextmenu.html" title="jQuery contextmenu()  方法">jQuery contextm...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
</dd>
</dl>
<dl>
<dt>
站点信息
</dt>
<dd>
&middot;
<a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
</dd>
<dd>
&middot;
<a href="/disclaimer">免责声明</a>
</dd>
<dd>
&middot;
<a href="/aboutus">关于我们</a>
</dd>
<dd>
&middot;
<a href="/archives">文章归档</a>
</dd>
</dl>
<div class="search-share">
<div class="app-download">
<div>
<strong>关注微信</strong>
</div>
</div>
<div class="share">
<img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
</div>
</div>
</div>
</div>
<div class="w-1000 copyright">
Copyright &copy; 2013-2016 <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
<strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
</div>
</div>
<div class="fixed-btn">
<a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
<a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
<a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
<div id="bottom-qrcode" class="modal panel-modal hide fade in">
<h4>微信关注</h4>
<div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
</div>
</div>
<div style="display:none;">
<script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-bootstrap.html" rel="prev"> AngularJS Bootstrap</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-api.html" rel="next"> AngularJS API</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">包含</span></h1>

<hr>
<p class="intro">在 AngularJS 中，你可以在 HTML 中包含 HTML 文件。</p>

<hr>

<h2>在 HTML 中包含 HTML 文件</h2>
<p>在 HTML 中，目前还不支持包含 HTML 文件的功能。</p>

<hr>
<h2>服务端包含</h2>
<p>大多服务端脚本都支持包含文件功能 (<strong>SSI</strong>： Server Side Includes)。</p>
<p>使用 SSI, 你可在 HTML 中包含 HTML 文件，并发送到客户端浏览器。</p>
<div class="example">
<h2 class="example">PHP 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">?php</span> <span class="highATT">require("navigation.php"); ?</span><span class="highGT">&gt;</span>
</div>
</div>
<hr>
<h2>客户端包含</h2>
<p>通过 JavaScript 有很多种方式可以在 HTML 中包含 HTML 文件。</p>

<p>通常我们使用 http 请求 (<strong>AJAX</strong>) 从服务端获取数据，返回的数据我们可以通过
使用  <strong>innerHTML</strong> 写入到 HTML 元素中。 </p>
<hr>
<h2>AngularJS 包含</h2>
<p>使用 AngularJS, 你可以使用 <strong>ng-include</strong> 
指令来包含 HTML 内容:</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
	<span class="highLT">&lt;</span><span class="highELE">body</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">div</span> 
<span class="highATT">class=</span><span class="highVAL">"container"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-include=</span><span class="highVAL">"'myUsers_List.htm'"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">div</span> 
<span class="highATT">ng-include=</span><span class="highVAL">"'myUsers_Form.htm'"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
	<span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span></div>
</div>
<p>步骤如下：<br> </p>

<hr>
<h2>步骤 1: 创建 HTML 列表 </h2>
<div class="example">
<h2 class="example">myUsers_List.html</h2>
<div class="example_code">
 <span class="highLT">&lt;</span><span class="highELE">h3</span><span class="highGT">&gt;</span>Users<span class="highLT">&lt;</span><span class="highELE">/h3</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">table</span> <span class="highATT">class=</span><span class="highVAL">"table table-striped"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">thead</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">tr</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">th</span><span class="highGT">&gt;</span>Edit<span class="highLT">&lt;</span><span class="highELE">/th</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">th</span><span class="highGT">&gt;</span>First Name<span class="highLT">&lt;</span><span class="highELE">/th</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">th</span><span class="highGT">&gt;</span>Last Name<span class="highLT">&lt;</span><span class="highELE">/th</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/tr</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/thead</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">tbody</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">tr</span> 
<span class="highATT">ng-repeat=</span><span class="highVAL">"user in users"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">class=</span><span class="highVAL">"btn"</span> <span class="highATT">ng-click=</span><span class="highVAL">"editUser(user.id)"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">class=</span><span class="highVAL">"glyphicon glyphicon-pencil"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span>&amp;nbsp;&amp;nbsp;Edit<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ 
user.fName }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">td</span><span class="highGT">&gt;</span><span class="highATT">{{ user.lName }}</span><span class="highLT">&lt;</span><span class="highELE">/td</span><span class="highGT">&gt;</span><br>&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">/tr</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/tbody</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/table</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=myUsers_List" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>步骤 2: 创建 HTML 表单</h2>
<div class="example">
<h2 class="example">myUsers_Form.html</h2>
<div class="example_code">

<span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">class=</span><span class="highVAL">"btn btn-success"</span> <span class="highATT">ng-click=</span><span class="highVAL">"editUser('new')"</span><span class="highGT">&gt;</span><br>
	&nbsp; <span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">class=</span><span class="highVAL">"glyphicon glyphicon-user"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span> Create New User<br>
<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">hr</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">h3</span> <span class="highATT">ng-show=</span><span class="highVAL">"edit"</span><span class="highGT">&gt;</span>Create New User:<span class="highLT">&lt;</span><span class="highELE">/h3</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">h3</span> 
<span class="highATT">ng-hide=</span><span class="highVAL">"edit"</span><span class="highGT">&gt;</span>Edit User:<span class="highLT">&lt;</span><span class="highELE">/h3</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">form</span> <span class="highATT">class=</span><span class="highVAL">"form-horizontal"</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">div</span> 
<span class="highATT">class=</span><span class="highVAL">"form-group"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">label</span> <span class="highATT">class=</span><span class="highVAL">"col-sm-2 control-label"</span><span class="highGT">&gt;</span>First 
Name:<span class="highLT">&lt;</span><span class="highELE">/label</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"col-sm-10"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">input</span> 
<span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"fName"</span> <span class="highATT">ng-disabled=</span><span class="highVAL">"!edit"</span> <span class="highATT">placeholder=</span><span class="highVAL">"First Name"</span><span class="highGT">&gt;</span><br>
&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span> <br><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"form-group"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">label</span> 
<span class="highATT">class=</span><span class="highVAL">"col-sm-2 control-label"</span><span class="highGT">&gt;</span>Last Name:<span class="highLT">&lt;</span><span class="highELE">/label</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">div</span> 
<span class="highATT">class=</span><span class="highVAL">"col-sm-10"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"text"</span> <span class="highATT">ng-model=</span><span class="highVAL">"lName"</span> 
<span class="highATT">ng-disabled=</span><span class="highVAL">"!edit"</span> <span class="highATT">placeholder=</span><span class="highVAL">"Last Name"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">div</span> 
<span class="highATT">class=</span><span class="highVAL">"form-group"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">label</span> <span class="highATT">class=</span><span class="highVAL">"col-sm-2 
control-label"</span><span class="highGT">&gt;</span>Password:<span class="highLT">&lt;</span><span class="highELE">/label</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"col-sm-10"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"password"</span> <span class="highATT">ng-model=</span><span class="highVAL">"passw1"</span> <span class="highATT">placeholder=</span><span class="highVAL">"Password"</span><span class="highGT">&gt;</span><br>&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"form-group"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">label</span> <span class="highATT">class=</span><span class="highVAL">"col-sm-2 
control-label"</span><span class="highGT">&gt;</span>Repeat:<span class="highLT">&lt;</span><span class="highELE">/label</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"col-sm-10"</span><span class="highGT">&gt;</span><br>&nbsp;&nbsp;&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"password"</span> <span class="highATT">ng-model=</span><span class="highVAL">"passw2"</span> <span class="highATT">placeholder=</span><span class="highVAL">"Repeat Password"</span><span class="highGT">&gt;</span><br>&nbsp; 
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/form</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">hr</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">class=</span><span class="highVAL">"btn btn-success"</span> 
<span class="highATT">ng-disabled=</span><span class="highVAL">"error || incomplete"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">class=</span><span class="highVAL">"glyphicon 
	glyphicon-save"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span> Save Changes<br><span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span>
</div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=myUsers_Form" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>步骤 3: 创建控制器</h2>
<div class="example">
<h2 class="example">myUsers.js</h2>
<div class="example_code notranslate jsHigh">
	angular.module(<span class="highVAL">'myApp'</span>, []).controller(<span class="highVAL">'userCtrl'</span>, <span class="highELE">function</span>($scope) {<br>$scope.fName 
    = <span class="highVAL">''</span>;<br>$scope.lName = <span class="highVAL">''</span>;<br>$scope.passw1 = <span class="highVAL">''</span>;<br>$scope.passw2 = <span class="highVAL">''</span>;<br>
    $scope.users = [<br>{id:<span class="highVAL">1</span>, fName:<span class="highVAL">'Hege'</span>,lName:<span class="highVAL">"Pege"</span> },<br>{id:<span class="highVAL">2</span>, fName:<span class="highVAL">'Kim'</span>,lName:<span class="highVAL">"Pim"</span> 
    },<br>{id:<span class="highVAL">3</span>, fName:<span class="highVAL">'Sal'</span>,lName:<span class="highVAL">"Smith"</span> },<br>{id:<span class="highVAL">4</span>, fName:<span class="highVAL">'Jack'</span>,lName:<span class="highVAL">"Jones"</span> 
    },<br>{id:<span class="highVAL">5</span>, fName:<span class="highVAL">'John'</span>,lName:<span class="highVAL">"Doe"</span> },<br>{id:<span class="highVAL">6</span>, fName:<span class="highVAL">'Peter'</span>,lName:<span class="highVAL">"Pan"</span> 
    }<br>];<br>$scope.edit = <span class="highVAL">true</span>;<br>$scope.error = <span class="highVAL">false</span>;<br>$scope.incomplete 
    = <span class="highVAL">false</span>; <br>$scope.editUser = <span class="highELE">function</span>(id) {<br>&nbsp; <span class="highELE">if</span> (id == <span class="highVAL">'new'</span>) {<br>&nbsp;&nbsp;&nbsp; $scope.edit 
    = <span class="highVAL">true</span>;<br>&nbsp;&nbsp;&nbsp; $scope.incomplete = <span class="highVAL">true</span>;<br>&nbsp;&nbsp;&nbsp; $scope.fName = <span class="highVAL">''</span>;<br>&nbsp;&nbsp;&nbsp; $scope.lName = 
    <span class="highVAL">''</span>;<br>&nbsp;&nbsp;&nbsp; } <span class="highELE">else</span> {<br>&nbsp;&nbsp;&nbsp; $scope.edit = <span class="highVAL">false</span>;<br>&nbsp;&nbsp;&nbsp; $scope.fName = $scope.users[id-1].fName;<br>
    &nbsp;&nbsp;&nbsp;
    $scope.lName = $scope.users[id-1].lName; <br>&nbsp; }<br>};<br><br>$scope.$watch(<span class="highVAL">'passw1'</span>,<span class="highELE">function</span>() 
    {$scope.test();});<br>$scope.$watch(<span class="highVAL">'passw2'</span>,<span class="highELE">function</span>() {$scope.test();});<br>
    $scope.$watch(<span class="highVAL">'fName'</span>,<span class="highELE">function</span>() {$scope.test();});<br>$scope.$watch(<span class="highVAL">'lName'</span>,<span class="highELE">function</span>() 
    {$scope.test();});<br><br>$scope.test = <span class="highELE">function</span>() {<br>&nbsp; <span class="highELE">if</span> ($scope.passw1 
    !== $scope.passw2) {<br>&nbsp;&nbsp;&nbsp; $scope.error = <span class="highVAL">true</span>;<br>&nbsp;&nbsp;&nbsp; } <span class="highELE">else</span> {<br>&nbsp;&nbsp;&nbsp; $scope.error = 
    <span class="highVAL">false</span>;<br>&nbsp; }<br>&nbsp; $scope.incomplete = <span class="highVAL">false</span>;<br>&nbsp; <span class="highELE">if</span> ($scope.edit &amp;&amp; (!$scope.fName.length 
    ||<br>&nbsp;&nbsp;&nbsp; !$scope.lName.length ||<br>&nbsp;&nbsp;&nbsp; !$scope.passw1.length || 
    !$scope.passw2.length)) {<br>&nbsp;&nbsp;&nbsp; $scope.incomplete = <span class="highVAL">true</span>;<br>&nbsp; }<br>};<br>
    })</div>
</div>

<hr>
<h2>步骤 4: 创建主页</h2>
<div class="example">
<h2 class="example">myUsers.html</h2>
<div class="example_code">
	<span class="highLT">&lt;</span><span class="highELE">!DOCTYPE</span> <span class="highATT">html</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">html</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">link</span> <span class="highATT">rel=</span><span class="highVAL">"stylesheet"</span> 
	<span class="highATT">href =</span><span class="highVAL"> "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"</span><span class="highGT">&gt;</span><br>
	<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL"> "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
<br><br><span class="highLT">&lt;</span><span class="highELE">body</span> 
    <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span> <span class="highATT">ng-controller=</span><span class="highVAL">"userCtrl"</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">div</span> 
	<span class="highATT">class=</span><span class="highVAL">"container"</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-include=</span><span class="highVAL">"'myUsers_List.htm'"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">div</span> 
	<span class="highATT">ng-include=</span><span class="highVAL">"'myUsers_Form.htm'"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL"> "myUsers.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span><br>
    <br><span class="highLT">&lt;</span><span class="highELE">/html</span><span class="highGT">&gt;</span></div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_includes" target="_blank">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-bootstrap.html" rel="prev"> AngularJS Bootstrap</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-api.html" rel="next"> AngularJS API</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-services.html" rel="prev"> AngularJS 服务(Service)</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-dependency-injection.html" rel="next"> AngularJS 依赖注入</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS 动画
</h1>
<p class="intro">
AngularJS 提供了动画效果，可以配合 CSS 使用。</p>
<p>AngularJS 使用动画需要引入 angular-animate.min.js 库。</p>
<pre>
&lt;script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"&gt;&lt;/script&gt;
</pre>
<p>还需在应用中使用模型 ngAnimate：</p>
<pre>
&lt;body ng-app="ngAnimate"&gt;
</pre>
<hr>
<h2>什么是动画？</h2>

<p>动画是通过改变 HTML 元素产生的动态变化效果。</p>
<div class="example">
<h3>实例</h3>

<p>勾选复选框隐藏 DIV:</p>
<div class="example_code">
	<span class="highLT">&lt;</span><span class="highELE">body</span> <span class="highATT">ng-app=</span><span class="highVAL">"ngAnimate"</span><span class="highGT">&gt;</span><br><br>隐藏 DIV: <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"checkbox"</span> <span class="highATT">ng-model=</span><span class="highVAL">"myCheck"</span><span class="highGT">&gt;</span><br>
	<br><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-hide=</span><span class="highVAL">"myCheck"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span><br></div>
	<br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_animation" target="_blank">尝试一下 »</a>
</div>

<table class="lamp"><tbody><tr>
<th style="width:34px"><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>应用中动画不宜太多，但合适的使用动画可以增加页面的丰富性，也可以更易让用户理解。</td>
</tr></tbody></table>

<p>如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
<div class="htmlHigh">
	<span class="highLT">&lt;</span><span class="highELE">body</span> <span class="highATT">ng-app=</span><span class="highVAL">"myApp"</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">h1</span><span class="highGT">&gt;</span>隐藏 DIV: <span class="highLT">&lt;</span><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"checkbox"</span> <span class="highATT">ng-model=</span><span class="highVAL">"myCheck"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/h1</span><span class="highGT">&gt;</span><br>
	<br><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-hide=</span><span class="highVAL">"myCheck"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span><span class="highGT">&gt;</span><br></div>
<div class="jsHigh">
<span class="highELE">var</span> app = 
	angular.module(<span class="highVAL">'myApp'</span>, [<span class="highVAL">'ngAnimate'</span>]);<br></div>
<div class="htmlHigh"><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span></div></div>	<br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_animation2" target="_blank">尝试一下 »</a>
</div>

<hr>
<h2>ngAnimate 做了什么?</h2>
<p>ngAnimate 模型可以添加或移除 class 。</p>
<p>ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。</p>
<p>AngularJS 添加/移除 class 的指令:</p>
<ul>
	<li><code>ng-show</code></li>
	<li><code>ng-hide</code></li>
	<li><code>ng-class</code></li>
	<li><code>ng-view</code></li>
	<li><code>ng-include</code></li>
	<li><code>ng-repeat</code></li>
	<li><code>ng-if</code></li>
	<li><code>ng-switch</code></li>
</ul>
<p><code>ng-show</code> 和 <code>ng-hide</code> 指令用于添加或移除 <code>ng-hide</code> class 的值。</p>
<p>其他指令会在进入 DOM 会添加 <code>ng-enter</code> 类，移除 DOM 会添加 <code>ng-leave</code> 属性。</p>
<p>当 HTML 元素位置改变时，<code>ng-repeat</code> 指令同样可以添加 <code>ng-move</code> 类 。 </p>
<p>此外， 在动画完成后，HTML 元素的类集合将被移除。例如：
<code>ng-hide</code> 指令会添加一下类：</p>
<ul>
	<li><code>ng-animate</code></li>
	<li><code>ng-hide-animate</code></li>
	<li><code>ng-hide-add</code> (如果元素将被隐藏)</li>
	<li><code>ng-hide-remove</code> (如果元素将显示)</li>
	<li><code>ng-hide-add-active</code> (如果元素将隐藏)</li>
	<li><code>ng-hide-remove-active</code> (如果元素将显示)</li>
</ul>
<hr>
<h2>使用 CSS 动画</h2>
<p>我们可以使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果，该部分内容你可以参阅我们的
<a href="/css/css3-transitions.html">CSS 过渡教程</a>，
<a href="/css/css3-animations.html">CSS 动画教程</a>。</p>
<hr>
<h2>CSS 过渡</h2>
<p>CSS 过渡可以让我们平滑的将一个 CSS 属性值修改为另外一个：</p>
<div class="example">
<h3>实例</h3>
<p>在 DIV 元素设置了 <code>.ng-hide</code> 类时，过渡需要花费 0.5 秒，高度从 100px 变为 0:</p>
<div class="example_code">
	<span class="highLT">&lt;</span><span class="highELE">style</span><span class="highGT">&gt;</span><br>div {<br>&nbsp;&nbsp;&nbsp; transition: all linear 0.5s;<br>&nbsp;&nbsp;&nbsp; 
	background-color: lightblue;<br>&nbsp;&nbsp;&nbsp; height: 100px;<br>}<br>.ng-hide 
	{<br>&nbsp;&nbsp;&nbsp; height: 0;<br>}<br><span class="highLT">&lt;</span><span class="highELE">/style</span><span class="highGT">&gt;</span><br></div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_animation_css" target="_blank">尝试一下 »</a>
</div>
<hr>
<h2>CSS 动画</h2>
<p>CSS 动画允许你平滑的修改 CSS 属性值:</p>
<div class="example">
<h3>实例</h3>
<p>在 DIV 元素设置了 <code>.ng-hide</code> 类时,  <code>myChange</code> 
动画将执行，它会平滑的将高度从 100px 变为 0:</p>
<div class="example_code">
	<span class="highLT">&lt;</span><span class="highELE">style</span><span class="highGT">&gt;</span><br>@keyframes myChange {<br>&nbsp;&nbsp;&nbsp; from {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	height: 100px;<br>&nbsp;&nbsp;&nbsp; } to {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	height: 0;<br>&nbsp;&nbsp;&nbsp; }<br>}<br>div {<br>&nbsp;&nbsp;&nbsp; 
	height: 100px;<br>&nbsp;&nbsp;&nbsp; background-color: lightblue;<br>}<br>
	div.ng-hide {<br>&nbsp;&nbsp;&nbsp; animation: 0.5s myChange;<br>}<br><span class="highLT">&lt;</span><span class="highELE">/style</span><span class="highGT">&gt;</span><br></div><br>
<a class="tryitbtn" href="/try/tryit.php?filename=try_ng_animation_css2" target="_blank">尝试一下 »</a>
</div>
			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-services.html" rel="prev"> AngularJS 服务(Service)</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-dependency-injection.html" rel="next"> AngularJS 依赖注入</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-animations.html" rel="prev"> AngularJS 动画</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-routing.html" rel="next"> AngularJS 路由</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS 依赖注入</h1>
<hr>
<h2>什么是依赖注入</h2>
<p>wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
</p><p>该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖
</p>
<blockquote>
<p>一句话 --- 没事你不要来找我，有事我会去找你。</p>
</blockquote>
<p>AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：</p>
<ul class="list">
<li>value</li>
<li>factory</li>
<li>service</li>
<li>provider</li>
<li>constant</li>
</ul>
<hr>
<h2>value
</h2>
<p>
Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：
</p>
<pre>
// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...

// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});
</pre>
<hr>
<h2>factory</h2>
<p>factory 是一个函数用于返回值。在 service 和 controller 需要时创建。</p>
<p>通常我们使用 factory 函数来计算或返回值。</p>
<pre>
// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...
</pre>
<hr>
<h2>provider</h2>
<p>
AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。</p>
<p>Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。</p>
<pre>
// 定义一个模块
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});
</pre>
<hr>
<h2>constant</h2>
<p>constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。</p>
<pre>
mainApp.constant("configParam", "constant value");
</pre>

<hr>
<h2>实例</h2>
<p>以下实例提供了以上几个依赖注入机制的演示。</p>
<pre>
&lt;html&gt;
   
   &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;AngularJS  依赖注入&lt;/title&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;h2&gt;AngularJS 简单应用&lt;/h2&gt;
      
      &lt;div ng-app = "mainApp" ng-controller = "CalcController"&gt;
         &lt;p&gt;输入一个数字: &lt;input type = "number" ng-model = "number" /&gt;&lt;/p&gt;
         &lt;button ng-click = "square()"&gt;X&lt;sup&gt;2&lt;/sup&gt;&lt;/button&gt;
         &lt;p&gt;结果: {{result}}&lt;/p&gt;
      &lt;/div&gt;
      
      &lt;script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;
      
      &lt;script&gt;
         var mainApp = angular.module("mainApp", []);
         
         mainApp.config(function($provide) {
            $provide.provider('MathService', function() {
               this.$get = function() {
                  var factory = {};
                  
                  factory.multiply = function(a, b) {
                     return a * b;
                  }
                  return factory;
               };
            });
         });
			
         mainApp.value("defaultInput", 5);
         
         mainApp.factory('MathService', function() {
            var factory = {};
            
            factory.multiply = function(a, b) {
               return a * b;
            }
            return factory;
         });
         
         mainApp.service('CalcService', function(MathService){
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
         
         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);

            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
			
      &lt;/script&gt;
      
   &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>
	<a class="tryitbtn" href="/try/try.php?filename=try_ng_dependency_injection" target="_blank">尝试一下 »</a>
	
</p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-animations.html" rel="prev"> AngularJS 动画</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-routing.html" rel="next"> AngularJS 路由</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-dependency-injection.html" rel="prev"> AngularJS 依赖注入</a> </div>
			<div class="next-design-link"></div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS 路由</h1>
<p>本章节我们将为大家介绍 AngularJS 路由。</p>
<p>AngularJS 路由允许我们通过不同的 URL 访问不同的内容。</p>
<p>通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。</p>
<p>通常我们的URL形式为 <b>http://runoob.com/first/page</b>，但在单页Web应用中 AngularJS 通过 <b># + 标记</b> 实现，例如：</p>
<pre>
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
</pre>


<p>
当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 <b># + 标记</b>  帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。</p>

<p><img src="http://www.runoob.com/wp-content/uploads/2016/04/angular-routing.png" /></p>
<p>
在以上图形中，我们可以看到创建了两个 URL： /ShowOrders 和 /AddNewOrder。每个 URL 都有对应的视图和控制器。</p>
<p>接下来我们来看一个简单的实例：</p>
<pre>
&lt;html&gt;
    &lt;head&gt;
    	&lt;meta charset="utf-8"&gt;
        &lt;title&gt;AngularJS 路由实例 - 菜鸟教程&lt;/title&gt;
    &lt;/head&gt;
    &lt;body ng-app='routingDemoApp'&gt;
     
        &lt;h2&gt;AngularJS 路由应用&lt;/h2&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#/"&gt;首页&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#/computers"&gt;电脑&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#/printers"&gt;打印机&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#/blabla"&gt;其他&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
         
        &lt;div ng-view&gt;&lt;/div&gt;
        &lt;script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;
        &lt;script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            angular.module('routingDemoApp',['ngRoute'])
            .config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{template:'这是首页页面'})
                .when('/computers',{template:'这是电脑分类页面'})
                .when('/printers',{template:'这是打印机页面'})
                .otherwise({redirectTo:'/'});
            }]);
        &lt;/script&gt;
     
     
    &lt;/body&gt;
&lt;/html&gt;
</pre>
<p> <a class="tryitbtn" href="/try/try.php?filename=try_ng_routing1&basepath=0" target="_blank">尝试一下 »</a> </p>

<p>实例解析：</p>
<ul>
<li><p>1、载入了实现路由的 js 文件：angular-route.js。</p></li>
<li><p>2、包含了 ngRoute 模块作为主应用模块的依赖模块。</p>
<pre>
angular.module('routingDemoApp',['ngRoute'])
</pre>
</li>
<li><p>3、使用 ngView 指令。</p>
<pre>&lt;div ng-view&gt;&lt;/div&gt;</pre>
<p>该 div 内的 HTML 内容会根据路由的变化而变化。</p>
</li>
<li><p>4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。</p>

<pre>
module.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑分类页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
}]);
</pre>
</li></ul>
<p>AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。</p>
<p>$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:</p>
<ul>
<li>第一个参数是 URL 或者 URL 正则规则。</li>
<li>第二个参数是路由配置对象。</li>
</ul>
</li>
<hr>

<h2>路由设置对象</h2>
<p>AngularJS 路由也可以通过不同的模板来实现。</p>$routeProvider.when 函数的第一个参数是  URL 或者 URL 正则规则，第二个参数为路由配置对象。</p>
<p>路由配置对象语法规则如下：</p>
<pre>
$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object&lt;key, function&gt;
});
</pre>
<p>参数说明：</p>
<ul>
<li><p><b>template:</b></p>
<p>如果我们只需要在 ng-view  中插入简单的 HTML 内容，则使用该参数：</p>
<pre>.when('/computers',{template:'这是电脑分类页面'})</pre>
</li>
<li><p><b>templateUrl:</b></p>
<p>如果我们只需要在 ng-view  中插入 HTML 模板文件，则使用该参数：</p>

<pre>
$routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});
</pre>
<p>以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。</p>
</li>


<li><p><b>controller:</b></p>
<p>function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。</p>
</li>
<li><p><b>controllerAs:</b></p>
<p>string类型，为controller指定别名。</p>
</li>
<li><p><b>redirectTo:</b></p>
<p>重定向的地址。</p>
</li>
<li><p><b>resolve:</b></p>
<p>指定当前controller所依赖的其他模块。</p>
</li>
</ul>
<h3>实例</h3>
<pre>
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
&lt;script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
&lt;/script&gt;

  
&lt;/head&gt;

&lt;body ng-app="ngRouteExample" class="ng-scope"&gt;
  &lt;script type="text/ng-template" id="embedded.home.html"&gt;
      &lt;h1&gt; Home &lt;/h1&gt;
  &lt;/script&gt;

  &lt;script type="text/ng-template" id="embedded.about.html"&gt;
      &lt;h1&gt; About &lt;/h1&gt;
  &lt;/script&gt;

  &lt;div&gt; 
    &lt;div id="navigation"&gt;  
      &lt;a href="#/home"&gt;Home&lt;/a&gt;
      &lt;a href="#/about"&gt;About&lt;/a&gt;
    &lt;/div&gt;
      
    &lt;div ng-view=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p> <a class="tryitbtn" href="/try/try.php?filename=try_ng_routing2&basepath=0"  target="_blank">尝试一下 »</a> </p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-dependency-injection.html" rel="prev"> AngularJS 依赖注入</a> </div>
			<div class="next-design-link"></div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-modules.html" rel="prev"> AngularJS 模块</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-examples.html" rel="next"> AngularJS 实例</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">应用</span></h1>

<hr>
<p class="intro">现在是时候创建一个真正的 AngularJS 单页 Web 应用（single page web application，SPA）了。</p>

<hr>
<h2>AngularJS 应用实例</h2>
<p>您已经学习了足够多关于 AngularJS 的知识，现在可以开始创建您的第一个 AngularJS 应用程序：</p>

<div ng-app="myNoteApp" ng-controller="myNoteCtrl" style="width:400px;border:1px solid black;padding:10px;background-color:yellow" class="ng-scope">
<h2>我的笔记</h2>
<textarea ng-model="message" cols="40" rows="10" class="ng-pristine ng-untouched ng-valid"></textarea>
<br><br>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
<p>
剩余字数: <b><span ng-bind="left()" class="ng-binding">100</span></b>
</p>
</div>
<br>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="/try/demo_source/myNoteApp.js"></script>
<script src="/try/demo_source/myNoteCtrl.js"></script>

<hr>
<h2>应用程序讲解</h2>
<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">html</span> <span class="highATT">ng-app=</span><span class="highVAL">"myNoteApp"</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">head</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">meta</span> <span class="highATT">charset</span>=<span class="highVAL">"utf-8"</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/head</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">body</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myNoteCtrl"</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">h2</span><span class="highGT">&gt;</span>我的笔记<span class="highLT">&lt;</span><span class="highELE">/h2</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">textarea</span> <span class="highATT">ng-model=</span><span class="highVAL">"message"</span> <span class="highATT">cols=</span><span class="highVAL">"40"</span> <span class="highATT">rows=</span><span class="highVAL">"10"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/textarea</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">ng-click=</span><span class="highVAL">"save()"</span><span class="highGT">&gt;</span>保存<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">ng-click=</span><span class="highVAL">"clear()"</span><span class="highGT">&gt;</span>清除<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">p</span><span class="highGT">&gt;</span>Number of characters left: <span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">ng-bind=</span><span class="highVAL">"left()"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/p</span><span class="highGT">&gt;</span><br><br>
<span class="highLT">&lt;</span><span class="highELE">/div</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"myNoteApp.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"myNoteCtrl.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br><br>
	<span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/html</span><span class="highGT">&gt;</span></div>
<br><a class="tryitbtn" href="/try/tryit.php?filename=try_ng_note_app" target="_blank">尝试一下 »</a>
</div>
<p>应用程序文件 "myNoteApp.js":</p>
<div class="example">
<div class="example_code">
var app = angular.module("myNoteApp", []);
</div>
</div>
<p>控制器文件 "myNoteCtrl.js":</p>
<div class="example">
<div class="example_code">
app.controller("myNoteCtrl", function($scope) {<br>
&nbsp;&nbsp;&nbsp; $scope.message 
= "";<br>&nbsp;&nbsp;&nbsp; $scope.left&nbsp; = function() {return 100 - 
$scope.message.length;};<br>&nbsp;&nbsp;&nbsp; $scope.clear = function() 
{$scope.message = "";};<br>
&nbsp;&nbsp;&nbsp; $scope.save&nbsp; = function() {alert("Note Saved");};<br>
});
</div>
</div>
<p> &lt;html&gt; 元素是 AngularJS 应用: ng-app="<strong>myNoteApp</strong>" 的容器:</p>
<div class="example">
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">html</span> <span class="highATT">ng-app=</span><span class="highVAL">"myNoteApp"</span><span class="highGT">&gt;</span>
</div>
</div>

<p>&lt;div&gt; 是 HTML 页面中控制器: ng-controller="<strong>myNoteCtrl</strong>" 的作用域:</p>
<div class="example">
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">div</span> <span class="highATT">ng-controller=</span><span class="highVAL">"myNoteCtrl"</span><span class="highGT">&gt;</span>
</div>
</div>

<p> <strong>ng-model</strong> 指令绑定了 &lt;textarea&gt; 到控制器变量 <strong>
message</strong>:</p>
<div class="example">
<div class="example_code">
	<span class="highLT">&lt;</span><span class="highELE">textarea</span> <span class="highATT">ng-model=</span><span class="highVAL">"message"</span> <span class="highATT">cols=</span><span class="highVAL">"40"</span> <span class="highATT">rows=</span><span class="highVAL">"10"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/textarea</span><span class="highGT">&gt;</span></div>
</div>

<p>两个 <strong>ng-click</strong> 事件调用了控制器函数 <strong>clear()</strong> 
和 <strong>save()</strong>:</p>
<div class="example">
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">ng-click=</span><span class="highVAL">"save()"</span><span class="highGT">&gt;</span>Save<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">button</span> <span class="highATT">ng-click=</span><span class="highVAL">"clear()"</span><span class="highGT">&gt;</span>Clear<span class="highLT">&lt;</span><span class="highELE">/button</span><span class="highGT">&gt;</span>
</div>
</div>

<p> <strong>ng-bind</strong> 指令绑定控制器函数 <strong>left()</strong> 到&lt;span&gt; ，用于显示剩余字符:</p>
<div class="example">
<div class="example_code">
Number of characters left: <span class="highLT">&lt;</span><span class="highELE">span</span> <span class="highATT">ng-bind=</span><span class="highVAL">"left()"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/span</span><span class="highGT">&gt;</span>
</div>
</div>

<p>应用库文件需要在 AngularJs 加载后才能执行：</p>
<div class="example">
<div class="example_code">
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"myNoteApp.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span><br>
<span class="highLT">&lt;</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"myNoteCtrl.js"</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/script</span><span class="highGT">&gt;</span>
</div>
</div>
<hr><h2>AngularJS 应用架构</h2>
<p>以上实例是一个完整的 AngularJS 单页Web应用（single page web application，SPA）。</p>
<p>&lt;html&gt; 元素包含了 AngularJS 应用 (<strong>ng-app=</strong>)。</p>
<p>&lt;div&gt; 元素定义了 AngularJS 控制器的作用域
(<strong>ng-controller=</strong>)。</p>
<p>在一个应用可以由很多控制器。</p>
<p>应用文件(<strong>my...App.js</strong>) 定义了应用模型代码。</p>
<p>一个或多个控制器文件 (<strong>my...Ctrl.js</strong>) 定义了控制器代码。</p>
<hr>

<h2>总结 - 它是如何工作的呢？</h2>
<p>ng-app 指令位于应用的根元素下。</p>
<p>对于单页Web应用（single page web application，SPA），应用的根通常为
&lt;html&gt; 元素。</p>
<p>一个或多个 ng-controller 指令定义了应用的控制器。每个控制器有他自己的作用域：: 定义的 HTML 元素。</p>
<p>AngularJS 在 HTML DOMContentLoaded 事件中自动开始。如果找到
ng-app 指令 ， AngularJS 载入指令中的模块，并将 ng-app 作为应用的根进行编译。 </p>
<p>应用的根可以是整个页面，或者页面的一小部分，如果是一小部分会更快编译和执行。</p>
			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-modules.html" rel="prev"> AngularJS 模块</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-examples.html" rel="next"> AngularJS 实例</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-application.html" rel="prev"> AngularJS 应用</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-reference.html" rel="next"> AngularJS 参考手册</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">实例</span>
</h1>
<hr>
<h2>实例</h2>
<p>您可以在线编辑实例，然后点击按钮查看结果。</p>

<div class="example">
<h2 class="example">AngularJS 实例</h2>
<div class="example_code notranslate htmlHigh">
&lt;div ng-app=""&gt;<br><br>&lt;p&gt;Name: &lt;input type="text" ng-model="name"&gt;&lt;/p&gt;<br>
	&lt;p&gt;You wrote: {{ name }}&lt;/p&gt;
<br><br>&lt;/div&gt;<br>
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=try_ng_intro" target="_blank">尝试一下 »</a>
</div>
<br><hr>

<h2>AngularJS 基础</h2>
<p>
<a href="/try/try.php?filename=try_ng_intro_expression" target="_blank">我的第一个 AngularJS 表达式</a><br><a href="/try/try.php?filename=try_ng_intro_directives" target="_blank">我的第一个 AngularJS 指令</a><br><a href="/try/try.php?filename=try_ng_intro_directives_html" target="_blank">我的第一个 AngularJS 指令（带有有效的 HTML5）</a><br>
<a href="/try/try.php?filename=try_ng_intro_controller" target="_blank">AngularJS 控制器</a>
<br></p>
<p><b><a href="angularjs-intro.html">基础的 AngularJS 讲解</a></b></p>
<hr>

<h2>AngularJS 表达式</h2>
<p>
<a href="/try/tryit.php?filename=try_ng_expression" target="_blank">简单的表达式</a>
<br>
<a href="/try/tryit.php?filename=try_ng_expression_2" target="_blank">不使用 ng-app 的表达式</a>
<br>
<a href="/try/try.php?filename=try_ng_expressions" target="_blank">带有数字的表达式</a><br><a href="/try/try.php?filename=try_ng_bind_numbers" target="_blank">使用带有数字的 ng-bind</a><br><a href="/try/try.php?filename=try_ng_expressions_strings" target="_blank">带有字符串的表达式</a><br><a href="/try/try.php?filename=try_ng_bind_strings" target="_blank">使用带有字符串的 ng-bind</a><br><a href="/try/try.php?filename=try_ng_expressions_objects" target="_blank">带有对象的表达式</a><br><a href="/try/try.php?filename=try_ng_bind_objects" target="_blank">使用带有对象的 ng-bind</a><br><a href="/try/try.php?filename=try_ng_expressions_arrays" target="_blank">带有数组的表达式</a><br><a href="/try/try.php?filename=try_ng_bind_arrays" target="_blank">使用带有数组的 ng-bind</a><br></p>
<p><b><a href="angularjs-expressions.html">表达式讲解</a></b></p>
<hr>

<h2>AngularJS 指令</h2>
<p>
<a href="/try/try.php?filename=try_ng_directives" target="_blank">AngularJS 指令</a><br><a href="/try/try.php?filename=try_ng_binding" target="_blank">ng-model 指令</a><br><a href="/try/try.php?filename=try_ng_repeat_array" target="_blank">ng-repeat 指令（带有数组）</a><br><a href="/try/try.php?filename=try_ng_repeat_object" target="_blank">ng-repeat 指令（带有对象）</a><br></p>
<p><b><a href="angularjs-directives.html">指令讲解</a></b></p>
<hr>

<h2>AngularJS 控制器</h2>
<p>
<a href="/try/try.php?filename=try_ng_controller" target="_blank">AngularJS 控制器</a><br><a href="/try/try.php?filename=try_ng_controller_property" target="_blank">控制器属性</a><br><a href="/try/try.php?filename=try_ng_controller_function" target="_blank">控制器函数</a><br><a href="/try/try.php?filename=try_ng_controller_js" target="_blank">JavaScript 文件中的控制器 I</a><br><a href="/try/try.php?filename=try_ng_controller_names" target="_blank">JavaScript 文件中的控制器 II</a><br></p>
<p><b><a href="angularjs-controllers.html">控制器讲解</a></b></p>
<hr>

<h2>AngularJS 过滤器</h2>
<p>
<a href="/try/try.php?filename=try_ng_filters_uppercase" target="_blank">表达式过滤器 uppercase</a><br><a href="/try/try.php?filename=try_ng_filters_lowercase" target="_blank">表达式过滤器 lowercase</a><br>
<a href="/try/tryit.php?filename=try_ng_filters_currency" target="_blank">货币过滤器表达式</a><br>
<a href="/try/try.php?filename=try_ng_filters_orderby" target="_blank">指令过滤器 orderBy</a><br><a href="/try/try.php?filename=try_ng_filters_input" target="_blank">输入过滤器</a><br></p>
<p><b><a href="angularjs-filters.html">过滤器讲解</a></b></p>
<hr><h2>AngularJS XMLHttpRequest</h2>
<p>
<a href="/try/tryit.php?filename=try_ng_customers_json" target="_blank">读取静态 JSON 文件</a><br>
</p>
<p><a href="angularjs-http.html">XMLHttpRequest 解析</a></p>
<hr>
<h2>AngularJS 表格</h2>
<p>
<a href="/try/tryit.php?filename=try_ng_tables_simple" target="_blank">显示一个表格 (简单)</a><br>
<a href="/try/tryit.php?filename=try_ng_tables_css" target="_blank">带有 CSS 样式的表格</a><br>
<a href="/try/tryit.php?filename=try_ng_tables_orderby" target="_blank">表格排序</a><br>
<a href="/try/tryit.php?filename=try_ng_tables_ucase" target="_blank">使用 uppercase 过滤器的表格</a><br>
<a href="/try/tryit.php?filename=try_ng_tables_index" target="_blank">使用序号的表格</a><br>
<a href="/try/tryit.php?filename=try_ng_tables_even" target="_blank">使用 even 和 odd 表格</a><br>
</p>
<hr>
<h2>AngularJS - 从数据库中读取数据</h2>
<p>
<a href="/try/tryit.php?filename=try_ng_customers_mysql" target="_blank">从 MySQL 数据库中读取数据</a><br>
<a href="/try/tryit.php?filename=try_ng_customers_sql" target="_blank">从 SQL Server 数据库中读取数据</a><br>
</p>
<p><a href="angularjs-sql.html">AngularJS SQL 解析</a></p>
<hr>
<h2>AngularJS HTML DOM</h2>
<p>
<a href="/try/tryit.php?filename=try_ng_html_disabled" target="_blank"> ng-disabled 指令</a><br>
<a href="/try/tryit.php?filename=try_ng_html_show" target="_blank">ng-show 指令</a><br>
<a href="/try/tryit.php?filename=try_ng_html_hide" target="_blank">ng-hide 指令</a><br>
</p>
<p><a href="angularjs-html-dom.html">HTML DOM 解析</a></p>
<hr>
<h2>AngularJS 事件</h2>
<p>
<a href="/try/tryit.php?filename=try_ng_events_click" target="_blank">ng-click 指令</a><br>
<a href="/try/tryit.php?filename=try_ng_events_hide" target="_blank">ng-hide 指令</a><br>
<a href="/try/tryit.php?filename=try_ng_events" target="_blank">ng-show 指令</a>
</p>
<p><a href="angularjs-html-events.html">HTML 事件解析</a></p>
<hr>
<h2>AngularJS 模块</h2>
<p>
<a href="/try/tryit.php?filename=try_ng_module_body" target="_blank">在 body 中的 AngularJS 模块</a><br>
<a href="/try/tryit.php?filename=try_ng_module_files" target="_blank">在文件中 AngularJS 模块</a><br>
</p>
<p><a href="angularjs-modules.html">AngularJS 模块解析</a></p>
<hr>
<h2>AngularJS 表单</h2>
<p>
<a href="/try/tryit.php?filename=try_ng_form" target="_blank">AngularJS 表单</a><br>
<a href="/try/tryit.php?filename=try_ng_validate" target="_blank">AngularJS 验证</a><br>
</p>
<p><a href="angularjs-forms.html">AngularJS 表单解析</a></p>
<hr>
<h2>AngularJS API</h2>
<p>
<a href="/try/tryit.php?filename=try_ng_api_lowercase" target="_blank">AngularJS angular.lowercase()</a><br>
<a href="/try/tryit.php?filename=try_ng_api_uppercase" target="_blank">AngularJS angular.uppercase()</a><br>
<a href="/try/tryit.php?filename=try_ng_api_isstring" target="_blank">AngularJS angular.isString()</a><br>
<a href="/try/tryit.php?filename=try_ng_api_isnumber" target="_blank">AngularJS angular.isNumber()</a><br>
</p>
<p><a href="angularjs-api.html">API 解析</a></p>
<hr>
<h2>AngularJS Bootstrap</h2>
<p>
<a href="/try/tryit.php?filename=try_ng_myusers" target="_blank">AngularJS 使用 Bootstrap</a><br>
<a href="/try/tryit.php?filename=try_ng_includes" target="_blank">AngularJS 使用 Bootstrap 并使用包含文件功能</a><br>
</p>
<p><a href="angularjs-bootstrap.html">Bootstrap 解析</a></p>
<hr>
<h2>AngularJS 应用</h2>
<p>
<a href="/try/tryit.php?filename=try_ng_note_app" target="_blank">AngularJS 笔记应用</a><br>
<a href="/try/tryit.php?filename=try_ng_todo_app" target="_blank">AngularJS 备忘录应用</a>
</p>
<p><a href="angularjs-application.html">AngularJS 应用</a></p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-application.html" rel="prev"> AngularJS 应用</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-reference.html" rel="next"> AngularJS 参考手册</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AngularJS 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AngularJS 教程"  href="/angularjs/angularjs-tutorial.html" >
			AngularJS 教程			</a>
						<a target="_top" title="AngularJS 简介"  href="/angularjs/angularjs-intro.html" >
			AngularJS 简介			</a>
						<a target="_top" title="AngularJS 表达式"  href="/angularjs/angularjs-expressions.html" >
			AngularJS 表达式			</a>
						<a target="_top" title="AngularJS 指令"  href="/angularjs/angularjs-directives.html" >
			AngularJS 指令			</a>
			<a target="_top" title="AngularJS 模型" href="angularjs-model.html"> AngularJS 模型</a>
<a target="_top" title="AngularJS Scope(作用域)" href="angularjs-scopes.html"> AngularJS Scope(作用域)</a>			<a target="_top" title="AngularJS 控制器"  href="/angularjs/angularjs-controllers.html" >
			AngularJS 控制器			</a>
						<a target="_top" title="AngularJS 过滤器"  href="/angularjs/angularjs-filters.html" >
			AngularJS 过滤器			</a>
			<a target="_top" title="AngularJS Service" href="/angularjs/angularjs-services.html"> AngularJS Service </a>
<a target="_top" title="AngularJS Http" href="/angularjs/angularjs-http.html"> AngularJS Http </a>
<a target="_top" title="AngularJS Select" href="/angularjs/angularjs-select.html"> AngularJS Select</a><a target="_top" title="AngularJS 表格" href="/angularjs/angularjs-tables.html"> AngularJS 表格 </a><a target="_top" title="AngularJS SQL" href="/angularjs/angularjs-sql.html"> AngularJS SQL </a>			<a target="_top" title="AngularJS HTML DOM"  href="/angularjs/angularjs-html-dom.html" >
			AngularJS HTML DOM			</a>
						<a target="_top" title="AngularJS 事件"  href="/angularjs/angularjs-html-events.html" >
			AngularJS 事件			</a>
						<a target="_top" title="AngularJS 模块"  href="/angularjs/angularjs-modules.html" >
			AngularJS 模块			</a>
			<a target="_top" title="AngularJS 表单" href="angularjs-forms.html"> AngularJS 表单 </a>
<a target="_top" title="AngularJS 输入验证" href="angularjs-validation.html"> AngularJS 输入验证 </a>
<a target="_top" title="AngularJS API" href="angularjs-api.html"> AngularJS API </a>
<a target="_top" title="AngularJS Bootstrap" href="angularjs-bootstrap.html"> AngularJS Bootstrap </a>
<a target="_top" title="AngularJS 包含" href="angularjs-include.html"> AngularJS 包含</a>
<a target="_top" title="AngularJS 动画" href="angularjs-animations.html">AngularJS 动画</a>
<a target="_top" title="AngularJS 依赖注入" href="angularjs-dependency-injection.html">AngularJS 依赖注入</a>
<a target="_top" title="AngularJS 路由" href="angularjs-routing.html">AngularJS 路由</a>			<a target="_top" title="AngularJS 应用"  href="/angularjs/angularjs-application.html" >
			AngularJS 应用			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">实例</span></h2>			<a target="_top" title="AngularJS 实例"  href="/angularjs/angularjs-examples.html" >
			AngularJS 实例			</a>
			<br><h2 class="left">AngularJS <span class="left_h2">参考手册</span></h2>			<a target="_top" title="AngularJS 参考手册"  href="/angularjs/angularjs-reference.html" >
			AngularJS 参考手册			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-examples.html" rel="prev"> AngularJS 实例</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-http.html" rel="next"> AngularJS Http</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AngularJS <span class="color_h1">参考手册</span></h1>

<hr>
<h2>AngularJS 指令</h2>
<p>本教程用到的 AngularJS 指令 :</p>
<table class="reference">
<tbody><tr>
<th style="width:20%">指令</th>
<th>描述</th>
</tr>
<tr>
   <td><a href="ng-ng-app.html">ng-app</a></td>
   <td>定义应用程序的根元素。</td>
</tr>
<tr>
   <td><a href="ng-ng-bind.html">ng-bind</a></td>
   <td>绑定 HTML 元素到应用程序数据</td>
</tr>
<tr>
   <td><a href="ng-ng-bind-html.html">ng-bind-html</a></td>
   <td>绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符</td>
</tr>
<tr>
   <td><a href="ng-ng-bind-template.html">ng-bind-template</a></td>
   <td>规定要使用模板替换的文本内容</td>
</tr>
<tr>
   <td><a href="ng-ng-blur.html">ng-blur</a></td>
   <td>规定 blur 事件的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-change.html">ng-change</a></td>
   <td>规定在内容改变时要执行的表达式</td>
</tr>
<tr>
   <td><a href="ng-ng-checked.html">ng-checked</a></td>
   <td>规定元素是否被选中</td>
</tr>
<tr>
   <td><a href="ng-ng-class.html">ng-class</a></td>
   <td>指定 HTML 元素使用的 CSS 类</td>
</tr>
<tr>
   <td><a href="ng-ng-class-even.html">ng-class-even</a></td>
   <td>类似 ng-class，但只在偶数行起作用</td>
</tr>
<tr>
   <td><a href="ng-ng-class-odd.html">ng-class-odd</a></td>
   <td>类似 ng-class，但只在奇数行起作用</td>
</tr>
<tr>
   <td><a href="ng-ng-click.html">ng-click</a></td>
   <td>定义元素被点击时的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-cloak.html">ng-cloak</a></td>
   <td>在应用正要加载时防止其闪烁</td>
</tr>
<tr>
   <td><a href="ng-ng-controller.html">ng-controller</a></td>
   <td>定义应用的控制器对象</td>
</tr>
<tr>
   <td><a href="ng-ng-copy.html">ng-copy</a></td>
   <td>规定拷贝事件的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-csp.html">ng-csp</a></td>
   <td>修改内容的安全策略</td>
</tr>
<tr>
   <td><a href="ng-ng-cut.html">ng-cut</a></td>
   <td>规定剪切事件的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-dblclick.html">ng-dblclick</a></td>
   <td>规定双击事件的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-disabled.html">ng-disabled</a></td>
   <td>规定一个元素是否被禁用</td>
</tr>
<tr>
   <td><a href="ng-ng-focus.html">ng-focus</a></td>
   <td>规定聚焦事件的行为</td>
</tr>
<tr>
   <td>ng-form</td>
   <td>指定 HTML 表单继承控制器表单</td>
</tr>
<tr>
   <td><a href="ng-ng-hide.html">ng-hide</a></td>
   <td>隐藏或显示 HTML 元素</td>
</tr>
<tr>
   <td><a href="ng-ng-href.html">ng-href</a></td>
   <td>为 the &lt;a&gt; 元素指定链接</td>
</tr>
<tr>
   <td><a href="ng-ng-if.html">ng-if</a></td>
   <td>如果条件为 false 移除 HTML 元素</td>
</tr>
<tr>
   <td><a href="ng-ng-include.html">ng-include</a></td>
   <td>在应用中包含 HTML 文件</td>
</tr>
<tr>
   <td><a href="ng-ng-init.html">ng-init</a></td>
   <td>定义应用的初始化值</td>
</tr>
<tr>
   <td>ng-jq</td>
   <td>定义应用必须使用到的库，如：jQuery</td>
</tr>
<tr>
   <td><a href="ng-ng-keydown.html">ng-keydown</a></td>
   <td>规定按下按键事件的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-keypress.html">ng-keypress</a></td>
   <td>规定按下按键事件的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-keyup.html">ng-keyup</a></td>
   <td>规定松开按键事件的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-list.html">ng-list</a></td>
   <td>将文本转换为列表 (数组)</td>
</tr>
<tr>
   <td><a href="ng-ng-model.html">ng-model</a></td>
   <td>绑定 HTML 控制器的值到应用数据</td>
</tr>
<tr>
   <td><a href="ng-ng-model-options.html">ng-model-options</a></td>
   <td>规定如何更新模型</td>
</tr>
<tr>
   <td><a href="ng-ng-mousedown.html">ng-mousedown</a></td>
   <td>规定按下鼠标按键时的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-mouseenter.html">ng-mouseenter</a></td>
   <td>规定鼠标指针穿过元素时的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-mouseleave.html">ng-mouseleave</a></td>
   <td>规定鼠标指针离开元素时的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-mousemove.html">ng-mousemove</a></td>
   <td>规定鼠标指针在指定的元素中移动时的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-mouseover.html">ng-mouseover</a></td>
   <td>规定鼠标指针位于元素上方时的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-mouseup.html">ng-mouseup</a></td>
   <td>规定当在元素上松开鼠标按钮时的行为</td>
</tr>
<tr>
   <td><a href="ng-ng-non-bindable.html">ng-non-bindable</a></td>
   <td>规定元素或子元素不能绑定数据</td>
</tr>
<tr>
   <td><a href="ng-ng-open.html">ng-open</a></td>
   <td>指定元素的 open 属性</td>
</tr>
<tr>
   <td><a href="ng-ng-options.html">ng-options</a></td>
   <td>在 &lt;select&gt; 列表中指定 &lt;options&gt;</td>
</tr>
<tr>
   <td><a href="ng-ng-paste.html">ng-paste</a></td>
   <td>规定粘贴事件的行为</td>
</tr>
<tr>
   <td>ng-pluralize</td>
   <td>根据本地化规则显示信息</td>
</tr>
<tr>
   <td><a href="ng-ng-readonly.html">ng-readonly</a></td>
   <td>指定元素的 readonly 属性</td>
</tr>
<tr>
   <td><a href="ng-ng-repeat.html">ng-repeat</a></td>
   <td>定义集合中每项数据的模板</td>
</tr>
<tr>
   <td><a href="ng-ng-selected.html">ng-selected</a></td>
   <td>指定元素的 selected 属性</td>
</tr>
<tr>
   <td><a href="ng-ng-show.html">ng-show</a></td>
   <td>显示或隐藏 HTML 元素</td>
</tr>
<tr>
   <td><a href="ng-ng-src.html">ng-src</a></td>
   <td>指定 &lt;img&gt; 元素的 src 属性</td>
</tr>
<tr>
   <td><a href="ng-ng-srcset.html">ng-srcset</a></td>
   <td>指定 &lt;img&gt; 元素的 srcset 属性</td>
</tr>
<tr>
   <td><a href="ng-ng-style.html">ng-style</a></td>
   <td>指定元素的 style 属性</td>
</tr>
<tr>
   <td><a href="ng-ng-submit.html">ng-submit</a></td>
   <td>规定 onsubmit 事件发生时执行的表达式</td>
</tr>
<tr>
   <td><a href="ng-ng-switch.html">ng-switch</a></td>
   <td>规定显示或隐藏子元素的条件</td>
</tr>
<tr>
   <td>ng-transclude</td>
   <td>规定填充的目标位置</td>
</tr>
<tr>
   <td><a href="ng-ng-value.html">ng-value</a></td>
   <td>规定 input 元素的值</td>
</tr>
</tbody></table>
<p>过滤器解析 <a href="angularjs-filters.html">AngularJs 过滤器</a>。</p>
<hr>

<h2>AngularJS 事件</h2>
<p>AngularJS 支持以下事件:</p>
<ul>
 <li>ng-click</li>
 <li>ng-dbl-click</li>
 <li>ng-mousedown</li>
 <li>ng-mouseenter</li>
 <li>ng-mouseleave</li>
 <li>ng-mousemove</li>
 <li>ng-keydown</li>
 <li>ng-keyup</li>
 <li>ng-keypress</li>
 <li>ng-change</li>
</ul>
<p>事件解析： <a href="angularjs-html-events.html">Angular 事件</a>。</p>
<hr>

<h2>AngularJS 验证属性</h2>
<ul>
 <li>$dirty</li>
 <li>$invalid</li>
 <li>$error</li>
</ul>
<p>验证解析：<a href="angularjs-validation.html">Angular 验证</a>。</p>

<hr>

<h2>AngularJS 全局 API</h2>
<h3>转换</h3>
<table class="reference">
<tbody><tr>
	<th style="width:20%">API</th>
	<th>描述</th>
</tr>
<tr>
	<td>angular.lowercase()</td>
	<td>将字符串转换为小写</td>
</tr>
<tr>
	<td>angular.uppercase()</td>
	<td>将字符串转换为大写</td>
</tr>
<tr>
	<td>angular.copy()</td>
	<td>数组或对象深度拷贝</td>
</tr>
<tr>
	<td>angular.forEach()</td>
	<td>对象或数组的迭代函数</td>
</tr>
</tbody></table>

<h3>比较</h3>
<table class="reference">
<tbody><tr>
	<th style="width:20%">API</th>
	<th>描述</th>
</tr>
<tr>
	<td>angular.isArray()</td>
	<td>如果引用的是数组返回 true</td>
</tr>
<tr>
	<td>angular.isDate()</td>
	<td>如果引用的是日期返回 true</td>
</tr>
<tr>
	<td>angular.isDefined()</td>
	<td>如果引用的已定义返回 true</td>
</tr>
<tr>
	<td>angular.isElement()</td>
	<td>如果引用的是 DOM 元素返回 true</td>
</tr>
<tr>
	<td>angular.isFunction()</td>
	<td>如果引用的是函数返回 true</td>
</tr>
<tr>
	<td>angular.isNumber()</td>
	<td>如果引用的是数字返回 true</td>
</tr>
<tr>
	<td>angular.isObject()</td>
	<td>如果引用的是对象返回 true</td>
</tr>
<tr>
	<td>angular.isString()</td>
	<td>如果引用的是字符串返回 true</td>
</tr>
<tr>
	<td>angular.isUndefined()</td>
	<td>如果引用的未定义返回 true</td>
</tr>
<tr>
	<td>angular.equals()</td>
	<td>如果两个对象相等返回 true</td>
</tr>
</tbody></table>

<h3>JSON</h3>
<table class="reference">
<tbody><tr>
	<th style="width:20%">API</th>
	<th>描述</th>
</tr>
<tr>
	<td>angular.fromJSON()</td>
	<td>反序列化 JSON 字符串</td>
</tr>
<tr>
	<td>angular.toJSON()</td>
	<td>序列化 JSON 字符串</td>
</tr>
</tbody></table>

<h3>基础</h3>
<table class="reference">
<tbody><tr>
	<th style="width:20%">API</th>
	<th>描述</th>
</tr>
<tr>
	<td>angular.bootstrap()</td>
	<td>手动启动 AngularJS</td>
</tr>
<tr>
	<td>angular.element()</td>
	<td>包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。</td>
</tr>
<tr>
	<td>angular.module()</td>
	<td>创建，注册或检索 AngularJS 模块</td>
</tr>
</tbody></table>
<p>全局 API 解析 ：<a href="angularjs-api.html">Angular API</a>。</p>
			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/angularjs/angularjs-examples.html" rel="prev"> AngularJS 实例</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/angularjs/angularjs-http.html" rel="next"> AngularJS Http</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
</html>